1

我正在使用指令和模板。我的模板如下

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

在这里由于花括号手表被添加，它影响了我的表现。我不想要手表，因为我不会修改 attr2 或 attr3。我只想在这里直接解析值。

我们可以在不需要手表的地方使用 bindonce 指令，我们可以使用 bo-text="xyz" 代替，但在这里我想将值作为 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

一次绑定

似乎是一次绑定的好用例（如果您使用的是 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 回答