如何将数据作为属性本身的值传递给自定义指令？

Question

我有一个这样定义的指令：

angular.module("main.directives").directive("todo", function() {

   return {
      restrict: "A",
      scope: {
         todo: "=entity"
      },
      replace: false,
      templateUrl: "todo.html",
      link: function(scope, element, attributes) {       
      }
   };
});

我在模板中这样使用：

<div todo entity="todoData"></div>

todoData 来自控制器或其他一些本地范围。无论如何，这一切都像一个魅力，太酷了！

我的问题如下：我该如何修改指令定义，以便它也适用于这种类型的标记：

<div todo="todoData"></div>

如您所见，数据现在作为标记指令的属性值传入。就像 ng- 指令一样：

<p ng-repeat="bit in data"></p>
<p ng-click="whatever()"></p>

如何实现？

谢谢

Answer 1

替换

scope: {
    todo: "=entity"
},

来自

scope: {
    todo: "=todo"
},

或者干脆

scope: {
    todo: "="
},

Answer 2

您必须自己评估属性的值。隔离作用域不是我最喜欢的指令作用域之一。相反，您可以使用 scope = true 从父控制器继承。这将允许您使用父作用域中公开的所有变量。

在你的情况下。

angular.module("main.directives").directive("todo", function() {

   return {
      restrict: "A",
      scope: true,
      replace: false,
      templateUrl: "todo.html",
      link: function(scope, element, attributes) {   

           scope.todo = scope.$eval(attributes[todo]);

      }
   };
});

现在可以使用您的 todo 指令了。与任何其他 ng- 指令一样。

示例：

<div todo="getTodoList()"></div>
<div todo="[{description:'hahahha'}]"></div>

Answer 3

当您在 angularjs 中编写属性指令时，您可能希望它由属性值提供。例如，像这样：

<div my-attribute="somevalue"></div>

那么你如何创建一个接受它的新范围？这并不明显。以下是您的操作方法：

app.directive('myAttribute', function() {
    return {
        restrict: 'A',
        scope: {
            myAttribute: '='
        },
        template: '<div style="font-weight:bold">{{ myAttribute | number:2}}</div>'
    };
});

需要注意的技巧是 "self attribute" 因为属性名称采用驼峰式大小写。

这是Reference to This Answer!

如何将数据作为属性本身的值传递给自定义指令？

How do you pass in data to custom directives as a value of the attribute itself?

angularjs

angular-directive