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添加的内容将与外部（原始）范围绑定，而不是ng-transclude所在的当前元素的范围。

如果您希望将已转换的内容与隔离范围绑定，则可以使用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

在transclude ng-repeat中访问指令的范围

1 个答案: