1

ディレクティブとテンプレートを使用しています。私のテンプレートは次のとおりです

<div>
    <a data-my-dir="item" data-attr1="true"
        data-attr2="{{itemParentId}}"
        data-attr3="{{item.id}}">
    </a>
</div>

ここでは、中かっこの時計が追加されているため、パフォーマンスに影響を与えています。attr2 や attr3 を変更するつもりはないので、時計は必要ありません。ここだけ値を直接解決したい。

代わりに bo-text="xyz" を使用できるウォッチを必要としない場合は bindonce ディレクティブを使用できますが、ここでは値を attr としてカスタム ディレクティブに渡したいと考えています。

私のディレクティブのリンク関数内で、次のようにクリックイベントを要素にバインドしています

link: function (scope, element, attrs) {
    element.bind('click', function (event) {
        var myAttr1 = attrs.attr1;
        var myAttr2 = attrs.attr2;
    }
}

そのため、attr1 と attr2 のテンプレートの監視により、これらの値がクリック イベントで解決されます。

代替手段は何ですか？

4

2 に答える 2

1

ワンタイムバインディング

1回限りのバインディングの良いユースケースのようです（angular 1.3+を使用している場合）

<div>
    <a data-my-dir="item" 
        data-attr1="true"
        data-attr2="{{::itemParentId}}"
        data-attr3="{{::item.id}}">
    </a>
</div>

ディレクティブは次のようになります

angular.module('app', [])
  .directive("myDir", function() {
    return {
      restrict: "A",
      scope: {
         "attr1": "@",
         "attr2": "@",
         "attr3": "@",
      },
      template: '<span> {{attr1}} {{attr2}} {{attr3}}</span>'
    };
  })

デモ

http://plnkr.co/edit/GJCZmb9CTknZZbcRHN7s?p=preview

于 2015-06-19T09:19:01.750 に答える
0

data-attr2="itemParentId"直接使用することもできますが、そのためには=、現在@ディレクティブのオプションを使用しているため、使用する必要があります。

app.directive('myDir', function(){
    return {
       scope: {
           dataAttr1: '=', //or '=dataAttr1'
           dataAttr2: '=' //or '=dataAttr2'
       },
       link: function(scope, element, attrs){
           console.log(scope.dataAttr1);
           console.log(scope.dataAttr2);
       }
    }
})
于 2015-06-19T09:16:20.843 に答える