Comment obtenez-vous AngularJS pour se lier à l'attribut title d'une balise A?

Question

L'objectif est d'avoir un nom de produit apparaît dans l'info-bulle de la vignette. Les navigateurs ne pas créer une info-bulle de "ng-titre" ou "ng-attr-titre".

Nous sommes en utilisant AngularJS version 1.0.7. Vous pouvez ajouter n'importe quel attribut avec "ng" ou "ng-attr" et Angulaire va les lier en conséquence. Cependant, il ne semble pas pour "lier" pour le titre attirbute de l'HTML, "UN" tag.

Ex. 1.

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

Résultat attendu: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

Résultat réel: <a title="{{product.shortDesc}}" ...> Nous obtenons indésirables accolades dans l'info-bulle.

Ex. 2.

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

Résultat attendu: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

Résultat réel: <a ng-attr-title="Canon Powershot XS50 12MB Digital Camera" ...>

Nous ne sommes pas un simple title attirbute, ni ne nous obtenons un travail info-bulle.

Answer 1

Il semble que ng-attr est une nouvelle directive dans AngularJS 1.1.4 que vous pouvez éventuellement utiliser dans ce cas.

https://github.com/angular/angular.js/commit/cf17c6af475eace31cf52944afd8e10d3afcf6c0

Cependant, si vous restez avec 1.0.7, vous pouvez probablement écrire une directive personnalisée pour refléter l'effet.

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

Answer 2

Parfois, il n'est pas souhaitable d'utiliser l'interpolation sur l'attribut de titre ou sur d'autres attributs comme pour la question, parce ils obtiennent analysée avant l'interpolation. Donc:

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

Si un attribut avec une liaison est préfixé avec le ngAttr préfixe (dénormalisée ng-attr -), puis lors de la liaison va être appliqué à la correspondante unprefixed attribut. Cela permet de vous lier à des attributs qui seraient autrement avec impatience traitées par les navigateurs. L'attribut n'est défini que si la liaison est faite. Le préfixe est ensuite retiré:

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

(Assurez-vous que vous n'êtes pas à l'aide d'une très ancienne version de Anguleux). Voici une démo de violon à l'aide v1.2.2:

Violon