Pour accéder aux attributs d’une directive AngularJS

Question

Mon AngularJS modèle contient un custom HTML syntaxe du type:

<su-label tooltip="{{field.su_documentation}}">{{field.su_name}}</su-label>

J'ai créé une directive à traiter:

.directive('suLabel', function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: {
      title: '@tooltip'
    },
    template: '<label><a href="#" rel="tooltip" title="{{title}}" data-placement="right" ng-transclude></a></label>',
    link: function(scope, element, attrs) {
      if (attrs.tooltip) {
        element.addClass('tooltip-title');
      }
    },
  }
})

Tout fonctionne bien, à l'exception de l' attrs.tooltip expression, qui revient toujours undefined, même si l' tooltip attribut est visible à partir de Google Chrome la console JavaScript lorsque l'on fait un console.log(attrs).

Toute suggestion?

Mise à JOUR: UNE solution a été offert par Artem. Elle a consisté à faire:

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

AngularJS + stackoverflow = bonheur

Answer 1

Voir la section Attributs de la documentation sur les directives.

l'observation interpolées attributs: Utiliser $observer observer les changements de valeur des attributs qui contiennent de l'interpolation (par exemple src="{{bar}}"). Ce n'est pas seulement très efficace mais elle est aussi la seule façon d'obtenir facilement la valeur réelle, car lors de la liaison de la phase de l'interpolation n'a pas encore été évalué et donc la valeur est à cette époque indéfinie.

Answer 2

Bien que l'utilisation de '@' est plus appropriée que l'utilisation de '=' pour votre scénario, parfois j'utilise des '=' alors que je n'ai pas de à retenir pour utiliser attrs.$observer():

<su-label tooltip="field.su_documentation">{{field.su_name}}</su-label>

Directive:

myApp.directive('suLabel', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            title: '=tooltip'
        },
        template: '<label><a href="#" rel="tooltip" title="{{title}}" data-placement="right" ng-transclude></a></label>',
        link: function(scope, element, attrs) {
            if (scope.title) {
                element.addClass('tooltip-title');
            }
        },
    }
});

Le violon.

Avec '=' nous obtenons les deux sens de la liaison de données, de sorte que les soins doivent être prises pour s'assurer de la portée.le titre n'est pas modifié par inadvertance dans la directive. L'avantage est que lors de la liaison de la phase, le champ d'application de la propriété (portée.titre) est défini.