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

当您在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>'
    };
});

需要注意的诀窍是“自我属性”，因为驼峰情况下的属性名称。

以下是Reference to This Answer!

Answer 3

你必须在自己中评估属性的值。隔离范围不是我最喜欢的指令范围之一。相反，您可以使用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>

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

3 个答案: