Accès aux atsortingbuts d’une directive AngularJS

Mon modèle AngularJS contient une syntaxe HTML personnalisée comme:

{{field.su_name}} 

J’ai créé une directive pour le traiter:

 .directive('suLabel', function() { return { ressortingct: 'E', replace: true, transclude: true, scope: { title: '@tooltip' }, template: '', link: function(scope, element, attrs) { if (attrs.tooltip) { element.addClass('tooltip-title'); } }, } }) 

Tout fonctionne bien, à l’exception de l’expression attrs.tooltip , qui renvoie toujours undefined , même si l’atsortingbut tooltip est visible depuis la console JavaScript de Google Chrome lors de la création d’un console.log(attrs) .

Toute suggestion?

MISE À JOUR: Une solution a été offerte par Artem. Cela consistait à faire ceci:

 link: function(scope, element, attrs) { attrs.$observe('tooltip', function(value) { if (value) { element.addClass('tooltip-title'); } }); } 

AngularJS + stackoverflow = bonheur

Voir la section Atsortingbuts de la documentation sur les directives.

observer les atsortingbuts interpolés : Utilisez $ observe pour observer les changements de valeur des atsortingbuts contenant une interpolation (par exemple, src = “{{bar}}”). Cela est non seulement très efficace, mais c’est aussi le seul moyen d’obtenir facilement la valeur réelle car, pendant la phase de liaison, l’interpolation n’a pas encore été évaluée et la valeur est alors définie comme non définie.

Bien que l’utilisation de ‘@’ soit plus appropriée que d’utiliser ‘=’ pour votre scénario particulier, j’utilise parfois ‘=’ pour ne pas avoir à utiliser attrs. $ Observe ():

 {{field.su_name}} 

Directif:

 myApp.directive('suLabel', function() { return { ressortingct: 'E', replace: true, transclude: true, scope: { title: '=tooltip' }, template: '', link: function(scope, element, attrs) { if (scope.title) { element.addClass('tooltip-title'); } }, } }); 

Le violon

Avec ‘=’, nous obtenons une liaison de données bidirectionnelle, il faut donc veiller à ce que scope.title ne soit pas modifié accidentellement dans la directive. L’avantage est que pendant la phase de liaison, la propriété de scope locale (scope.title) est définie.