1

这是您可以看到的一个 plunker 示例：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 似乎打破了控制的那部分。据我所知，合适的位置可能是 compile 函数，但文档说 transcludeFn 参数将被弃用，所以我不确定如何继续。

我还应该注意，在使用 beta AngularJS 时，要么出现错误，要么出现新的范例，因为这不再是问题。似乎嵌入的内容总是可以访问指令范围以及外部控制器范围。

我非常感谢对此的任何启示。

4

1 回答 1

0

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

您可以通过复制ng-transclude 的代码并对其进行一些修改以提供正确的范围来解决问题：

.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

于 2014-08-09T10:30:48.580 回答