javascript - 如何创建一个指令来使用嵌入的 HTML 设置数据样式

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
    }
  };
});

View

<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 直到链接或 Controller 函数运行，这将是 < em>嵌入标记被嵌入后。

Angular 设置了一个“嵌入范围”，它最初继承自外部范围，因此您可以访问该上下文中的内容。然而，为了避免指令作用域被破坏时作用域未被破坏，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