javascript - 访问嵌入的 ng-repeat 内的指令范围

Question

我正在编写一个组件，需要对指令的隔离范围属性进行 ng-repeat。

考虑一下:

<div some-directive>
    <h2>Let's repeat something</h2>
    <p ng-repeat="item in contr.items">
      Title: {{ item.title }} 
      Description: {{ item.desc }}
    </p>
</div>

我的想法是指令提供了一个项目集合(实际代码中的解析，但我会在这里保持简单)。现在我有:

.directive('someDirective', function() {
  return {
    scope: {},
    transclude: true,
    template: '<div ng-transclude></div>',
    controller: function($scope) {
      $scope.items = this.items = [{
        title: "Item 1 title",
        desc: "Description"
      }, {
        title: "Item 2 title",
        desc: "Another desc"
      }, {
        title: "Item 3 title",
        desc: "Third desc"
      }, {
        title: "Item 4 title",
        desc: "Third desc"
      }];
    },
    controllerAs: 'contr'
  };
});

参见this Plunkr (如果您愿意，可以进行编辑)。

你有什么想法吗？

Answer 1

按照设计，通过 ng-transclude 添加的内容将与外部(原始)范围绑定(bind)，而不是与 ng-transclude 所在的当前元素的范围绑定(bind)上。

如果您希望嵌入的内容与隔离范围绑定(bind)，您可以使用 ng-tranclude 的修改版本，如下所示:

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

并使用它来代替ng-tranclude，如下所示:

template: '<div my-transclude></div>',

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