Question

以下是您可以看到的一个有关的例子：http://plnkr.co/edit/NQT8oUv9iunz2hD2pf8H

我有一个指令，我想转变成一个Web组件。我已经想到了几种方法，我可以用AngularJS实现这个目标，但是我对它的一部分有困难。我希望有人可以解释我的失误，而不是告诉我一个不同的方式去做。

想象一下，你有一个指令组件，用css类设置一些shell，也许是一些子组件等。但是让用户定义组件的主要内容。如下所示：

<my-list items="ctrl.stuff">
    <div>List Item: {{ item.name }}</div>
</my-list>

list指令的HTML可能类似于以下内容（使用OOCSS）：

<ul class="mas pam bas border--color-2">
    <li ng-repeat="items in item track by item.id" ng-transclude></li>
</ul>

通常，可以通过将指令范围链接到新内容来解决链接功能。它确实适用于其他组件。然而，引入ng-repeat似乎打破了控制的那一部分。据我所知，适当的地方可能是编译功能，但文档说不推荐使用transcludeFn参数，所以我不知道如何继续。

我还应该注意，当使用beta AngularJS时，会出现一个bug或一个新的范例，因为这不再是一个问题。似乎被转换的内容总是可以访问指令范围以及外部控制器范围。

我真的很感激对此的任何启示。

Answer 1

根据设计，通过ng-transclude添加的内容将与外部控制器范围绑定，而不是ng-transclude所在的当前元素的范围。

你可以通过复制ng-transclude's code来解决问题并稍微修改一下以给出正确的范围：

.directive('myTransclude', function () {
  return {
    restrict: 'EAC',
    link: function(scope, element, attrs, controllers, transcludeFn) {
      transcludeFn(scope, function(nodes) {
        element.empty();
        element.append(nodes);
      });
    }
  };
});

并在指令模板中将ng-transclude替换为my-transclude。

示例Plunker： http://plnkr.co/edit/i7ohGeRiO3m5kfxOehC1?p=preview

AngularJS：指令shell，允许用户定义的内容具有指令范围

1 个答案: