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

を実行するとGoogle ChromeのJavaScriptコンソールから属性が表示されても、attrs.tooltip常に返される式を除いて、すべてが正常に機能します。undefinedtooltipconsole.log(attrs)

なにか提案を？

更新：Artemによってソリューションが提供されました。それはこれを行うことにありました：

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

AngularJS + stackoverflow = bliss

ディレクティブに関するドキュメントの属性を参照してください。

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

特定のシナリオでは、「=」を使用するよりも「@」を使用する方が適切ですが、attrs。$ observe（）を使用することを覚えておく必要がないように、「=」を使用する場合があります。

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

指令：

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

フィドル。

'='を使用すると双方向のデータバインディングが取得されるため、scope.titleがディレクティブで誤って変更されないように注意する必要があります。利点は、リンク段階でローカルスコーププロパティ（scope.title）が定義されることです。