[解決済み] AngularJSディレクティブから属性にアクセスする

質問

私のAngularJSテンプレートは、いくつかのカスタムHTML構文を含んでいます。

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

処理するためのディレクティブを作りました。

.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');
      }
    },
  }
})

すべてうまくいきますが、例外として attrs.tooltip という式があり、これは常に undefined を返しますが、たとえ tooltip 属性は、Google Chrome の JavaScript コンソールで console.log(attrs) .

何か提案はありますか？

更新: 解決策はArtemによって提供されました。それは、このようにすることでした。

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

AngularJS + stackoverflow = 至福の時。

どのように解決するのですか？

セクションを参照 属性 をご覧下さい。

補間された属性の観察 : 補間処理を含む属性（例：src"{{bar}}"）の値の変化を観察するために$observeを使用します。これは非常に効率的であるだけでなく、実際の値を簡単に取得できる唯一の方法です。なぜなら、リンク段階ではまだ補間が評価されていないため、この時点では値は未定義に設定されています。