web-dev-qa-db-ja.com

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

console.log(attrs)の実行時にGoogle ChromeのJavaScriptコンソールからundefined属性が表示されていても、常にtooltipを返すattrs.tooltip式を除き、すべて正常に動作します。

なにか提案を？

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

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

AngularJS + stackoverflow = bliss

angularjsangularjs-directive
94
Ismael Ghalimi

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

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

83
Artem Andreev

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

25
Mark Rajcok