指令

Question

我认为对指令的一个非常简单的要求是：将数组或对象作为指令属性，然后允许指令的用户决定如何格式化/设置数据样式（假设指令是比我在这里概述的更复杂，它允许进一步操纵数据。）

非功能性示例如下：

指令

angular.module('app').directive('myDirective', () => {
  return {
    template: '<h2>Your data:</h2><div><ng-transclude></ng-transclude></div>',
    restrict: 'E',
    transclude: true,
    scope: false,
    link: ($scope, $element, $attrs) => {
      $scope.people = $attrs.data;

      // Assume some processing on the people data can occur here
    },
    controller: ($scope, $element, $attrs) => {
      $scope.people = $attrs.data;

      // Also assume that it can happen here
    }
  };
});

视图

<my-directive data="[{name: 'Tyler'}, {name: 'Mike'}, {name: 'John'}]">
  <ul>
    <li ng-repeat="person in people">{{person.name}}</li>
  </ul>
</my-directive>

这不起作用，我不知道为什么这种看似简单和人为的实现不会起作用。有什么建议吗？

Answer 1

传递给ng-transclude的标记在之前已被解析，它被转换为指令。这意味着它只访问指令范围之外的内容。由于您指定了scope: false，因此指令共享外部作用域，但是在链接或控制器函数运行之后才会定义scope.people，而在转换标记之后 被抄了。

Angular设置了一个“transclusion scope”，它最初从外部作用域继承，因此您可以访问该上下文中的内容。但是，为了避免范围在销毁指令范围时不被破坏，Angular实际上用指令的隔离范围替换$parent。

换句话说，您应该能够通过$parent属性访问指令范围数据。

<my-directive data="[{name: 'Tyler'}, {name: 'Mike'}, {name: 'John'}]"> <ul> <li ng-repeat="person in $parent.people">{{person.name}}</li> </ul> </my-directive>

http://codepen.io/Chevex/pen/eJKBgj?editors=1010

Answer 2

我认为你可以做的一件事就是通过指令的范围传递数据，这样就可以将它作为对象引用，而不是字符串：

scope: {
  people: '='
},

然后您可以在指令的链接/控制器中执行所需的所有操作，并将其反映在转换标记中。

看一下这个plnkr的例子：http://plnkr.co/edit/XK8YlcdeZ26nkhyopLb1?p=preview

如何创建一个指令，使用转换的HTML格式化数据

指令

视图

2 个答案: