Comment faire en sorte qu'AngularJS se lie à l'attribut title d'une balise A?

131

L'intention est de faire apparaître un nom de produit dans l'info-bulle d'une miniature. Les navigateurs ne créent pas d'infobulle à partir de "ng-title" ou "ng-attr-title".

Nous utilisons AngularJS version 1.0.7. Vous pouvez ajouter à n'importe quel attribut «ng-» ou «ng-attr» et Angular se liera en conséquence. Cependant, il ne semble pas "se lier" au titre attirbute de la balise HTML "A".

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 des accolades indésirables 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 actuel: <a ng-attr-title="Canon Powershot XS50 12MB Digital Camera" ...>

Nous n'obtenons pas une simple titleattirbute, ni une info-bulle fonctionnelle.

angularjs Benxamin
la source

Réponses:

228

Il ressemble à ng-attrune nouvelle directive dans AngularJS 1.1.4 que vous pouvez éventuellement utiliser dans ce cas.

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

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

Nhat Nguyen
la source
53

Parfois, il n'est pas souhaitable d'utiliser l'interpolation sur l'attribut title ou sur tout autre attribut comme d'ailleurs, car ils sont analysés avant l'interpolation. Alors:

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

Si un attribut avec une liaison est préfixé avec le préfixe ngAttr (dénormalisé comme ng-attr-), alors pendant la liaison sera appliqué à l'attribut sans préfixe correspondant. Cela vous permet de vous lier à des attributs qui seraient autrement traités avec empressement par les navigateurs. L'attribut sera défini uniquement lorsque la liaison sera effectuée. Le préfixe est alors supprimé:

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

(Assurez-vous que vous n'utilisez pas une version très antérieure d'Angular). Voici un violon de démonstration utilisant la v1.2.2:

Fiddle

AlwaysALearner
la source
3

Le problème ici est votre version d'AngularJS; ng-attrne fonctionne pas car il a été introduit dans la version 1.1.4. Je ne sais pas pourquoi cela title="{{product.shortDesc}}"ne fonctionne pas pour vous, mais j'imagine que c'est pour des raisons similaires (ancienne version Angular). J'ai testé cela sur 1.2.9 et cela fonctionne pour moi.

Quant aux autres réponses ici, ce n'est PAS parmi les rares cas d'utilisation pour ng-attr! Il s'agit d'une situation simple à double crochet:

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

Le querymodèle de recherche vit dans le périmètre défini par la ng-controller="whatever"directive. Donc, si vous souhaitez lier le modèle de requête à <title>, vous devez déplacer la ngControllerdéclaration vers un élément HTML qui est un parent commun aux éléments body et title:

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

Réf: https://docs.angularjs.org/tutorial/step_03

Solidak
la source