95

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

を実行すると属性がGoogleChromeの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

4

2 に答える 2

83

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

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

于 2012-08-11T10:31:54.547 に答える
25

特定のシナリオでは「=」を使用するよりも「@」を使用する方が適切ですが、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）が定義されることです。

于 2013-01-03T16:47:55.237 に答える