คุณจะทำให้ AngularJS เชื่อมโยงกับแอตทริบิวต์ title ของแท็ก A ได้อย่างไร?

131

จุดประสงค์คือต้องการให้ชื่อผลิตภัณฑ์ปรากฏในคำแนะนำเครื่องมือของภาพขนาดย่อ เบราว์เซอร์ไม่ได้สร้างคำแนะนำเครื่องมือจาก "ng-title" หรือ "ng-attr-title"

เรากำลังใช้ AngularJS เวอร์ชัน 1.0.7 คุณสามารถต่อท้ายแอตทริบิวต์ด้วย "ng-" หรือ "ng-attr" และ Angular จะผูกตามนั้น อย่างไรก็ตามดูเหมือนว่าจะไม่ "ผูก" กับการกำหนดชื่อของแท็ก HTML "A"

อดีต 1

รหัส: <a title="{{product.shortDesc}}" ...>

ผลลัพธ์ที่คาดหวัง: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

ผลลัพธ์ที่แท้จริง: <a title="{{product.shortDesc}}" ...>เราได้รับการจัดฟันที่ไม่ต้องการในคำแนะนำเครื่องมือ

อดีต 2

รหัส: <a ng-attr-title="{{product.shortDesc}}" ...>

ผลลัพธ์ที่คาดหวัง: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

ผลลัพธ์จริง: <a ng-attr-title="Canon Powershot XS50 12MB Digital Camera" ...>

เราไม่ได้รับtitleทัศนคติธรรมดาและไม่ได้รับคำแนะนำเครื่องมือในการทำงาน

angularjs

— Benxamin
แหล่งที่มา

228

ดูเหมือนว่าng-attrจะเป็นคำสั่งใหม่ในAngularJS 1.1.4ที่คุณสามารถใช้ในกรณีนี้ได้

<!-- example -->
<a ng-attr-title="{{product.shortDesc}}"></a>

อย่างไรก็ตามหากคุณใช้ 1.0.7 คุณอาจเขียนคำสั่งที่กำหนดเองเพื่อสะท้อนเอฟเฟกต์ได้

— นัทเหงียน
แหล่งที่มา

53

บางครั้งไม่พึงปรารถนาที่จะใช้การแก้ไขในแอตทริบิวต์ title หรือแอตทริบิวต์อื่น ๆ สำหรับเรื่องนั้นเนื่องจากมีการแยกวิเคราะห์ก่อนที่การแก้ไขจะเกิดขึ้น ดังนั้น:

<!-- dont do this -->
<!-- <a title="{{product.shortDesc}}" ...> -->

หากแอตทริบิวต์ที่มีการเชื่อมโยงถูกนำหน้าด้วยคำนำหน้า ngAttr (denormalized เป็น ng-attr-) ในระหว่างการเชื่อมโยงจะถูกนำไปใช้กับแอตทริบิวต์ที่ไม่ได้เติมคำนำหน้า สิ่งนี้ช่วยให้คุณสามารถเชื่อมโยงกับแอตทริบิวต์ที่เบราว์เซอร์จะประมวลผลอย่างกระตือรือร้น แอตทริบิวต์จะถูกตั้งค่าก็ต่อเมื่อการเชื่อมเสร็จสิ้น คำนำหน้าจะถูกลบออก:

<!-- do this -->
<a ng-attr-title="{{product.shortDesc}}" ...>

(ตรวจสอบให้แน่ใจว่าคุณไม่ได้ใช้ Angular เวอร์ชันก่อนหน้านี้) นี่คือซอสาธิตโดยใช้ v1.2.2:

Fiddle

— AlwaysALearner
แหล่งที่มา

3

ปัญหาคือ AngularJS เวอร์ชันของคุณ ng-attrใช้งานไม่ได้เนื่องจากมีการเปิดตัวในเวอร์ชัน 1.1.4 ฉันไม่แน่ใจว่าทำไมถึงtitle="{{product.shortDesc}}"ไม่เหมาะกับคุณ แต่ฉันคิดว่ามันเป็นเพราะเหตุผลที่คล้ายกัน (Angular รุ่นเก่า) ฉันทดสอบสิ่งนี้บน 1.2.9 และมันใช้งานได้สำหรับฉัน

สำหรับคำตอบอื่น ๆ ที่นี่ไม่ได้อยู่ในกรณีการใช้งานเพียงไม่กี่กรณีng-attr! นี่เป็นสถานการณ์วงเล็บปีกกาสองชั้นง่ายๆ:

<a title="{{product.shortDesc}}" ng-bind="product.shortDesc" />

— omikes
แหล่งที่มา

1

ดูซอที่นี่เพื่อรับคำตอบอย่างรวดเร็ว

data-ng-attr-title="{{d.age > 5 ? 'My age is greater than threshold': ''}}"

แสดงชื่อบนองค์ประกอบตามเงื่อนไขโดยใช้ Angular JS

— ซุนดาราปราบ
แหล่งที่มา

-4

queryโมเดลการค้นหาอยู่ในขอบเขตที่กำหนดโดยng-controller="whatever"คำสั่ง ดังนั้นหากคุณต้องการผูกโมเดลคิว<title>รีคุณต้องย้ายการngControllerประกาศไปยังองค์ประกอบ HTML ที่เป็นพาเรนต์ทั่วไปสำหรับทั้งองค์ประกอบเนื้อหาและหัวเรื่อง:

<html ng-app="phonecatApp" ng-controller="PhoneListCtrl">

อ้างอิง: https://docs.angularjs.org/tutorial/step_03

— solidak
แหล่งที่มา