Bagaimana Anda membuat AngularJS mengikat atribut title dari tag A?

131

Tujuannya adalah agar nama produk muncul di tooltip thumbnail. Browser tidak membuat tooltip dari "ng-title" atau "ng-attr-title."

Kami menggunakan AngularJS versi 1.0.7. Anda dapat menambahkan atribut apa pun dengan "ng-" atau "ng-attr" dan Angular akan mengikatnya. Namun, sepertinya tidak "mengikat" ke judul attirbute dari tag HTML "A".

Ex. 1.

Kode: <a title="{{product.shortDesc}}" ...>

Hasil yang diharapkan: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

Hasil aktual: <a title="{{product.shortDesc}}" ...>Kami mendapatkan kawat gigi yang tidak diinginkan di tooltip.

Ex. 2.

Kode: <a ng-attr-title="{{product.shortDesc}}" ...>

Hasil yang diharapkan: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

Hasil aktual: <a ng-attr-title="Canon Powershot XS50 12MB Digital Camera" ...>

Kami tidak mendapatkan titleattirbute polos , kami juga tidak mendapatkan tooltip yang berfungsi.

angularjs Benxamin
sumber

Jawaban:

228

Sepertinya ng-attrini adalah arahan baru dalam AngularJS 1.1.4 yang dapat Anda gunakan dalam kasus ini.

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

Namun, jika Anda tetap menggunakan 1.0.7, Anda mungkin bisa menulis arahan khusus untuk mencerminkan efeknya.

Nhat Nguyen
sumber
53

Kadang-kadang tidak diinginkan untuk menggunakan interpolasi pada atribut title atau pada atribut lain apa pun dalam hal ini, karena mereka diurai sebelum interpolasi berlangsung. Begitu:

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

Jika atribut dengan ikatan diawali dengan awalan ngAttr (didenormalisasi sebagai ng-attr-) maka selama pengikatan akan diterapkan ke atribut tidak diperbaiki yang sesuai. Ini memungkinkan Anda untuk mengikat atribut yang seharusnya diproses dengan penuh semangat oleh browser. Atribut akan ditetapkan hanya ketika pengikatan dilakukan. Awalan kemudian dihapus:

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

(Pastikan Anda tidak menggunakan versi Angular yang sangat awal). Berikut demo biola menggunakan v1.2.2:

Fiddle

Selalu Belajar
sumber
3

Masalahnya di sini adalah versi AngularJS Anda; ng-attrtidak berfungsi karena fakta bahwa itu diperkenalkan di versi 1.1.4. Saya tidak yakin mengapatitle="{{product.shortDesc}}" tidak bekerja untuk Anda, tetapi saya membayangkan itu karena alasan yang sama (versi Angular lama). Saya menguji ini pada 1.2.9 dan ini berfungsi untuk saya.

Adapun jawaban lain di sini, ini BUKAN di antara beberapa kasus penggunaan untuk ng-attr! Ini adalah situasi braket keriting ganda sederhana:

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

Model pencarian queryhidup dalam lingkup yang ditentukan oleh ng-controller="whatever"arahan. Jadi, jika Anda ingin mengikat model kueri <title>, Anda harus memindahkan ngControllerdeklarasi ke elemen HTML yang merupakan induk dari elemen tubuh dan judul:

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

Ref: https://docs.angularjs.org/tutorial/step_03

solidak
sumber