javascript - AngularJS 使用 ng-repeat 在指令中包含范围

Question

我的目标是有一个指令，我向其提供内容，并且它重复它们 X 次。就像 ng-repeat 一样，只是我想将其包装在其他功能中，例如限制切换和嵌入内容之外的额外元素。

出于某种原因，无论我如何尝试，嵌入都无法访问指令隔离范围。

我在 link 中使用了 transinclude 函数，有多种变体，但没有效果。这是一个演示:

• Plunkr

这是代码的要点:

app.directive('repeatContents', function() {
  return {
    scope: {
      items: '=repeatContents',
      limit: '=repeatLimit'
    },
    transclude: true,
    template: '<div ng-repeat="item in items">' +
                  '<em>Outside transclude: {{item}}</em><br />' +
                  '<ng-transclude></ng-transclude>' +
              '</div>',
    link: function(scope, el, attrs, ctrl, transclude) {
      transclude(scope, function(clone, scope) {
        el.append(clone);
      });
    }
  }
});

如果您查看 plunkr，您会发现嵌入 {{item}} 外部可用，但内部不可用。不管 link 函数的内容应该如何处理它。知道我能做什么吗？

Answer 1

transclude:true嵌入内容，同时保留对内容嵌入范围的引用(在我们的例子中，repeat-contents将嵌入<other-directive other-item="item"></other-directive>，同时保留对外部范围的引用。item未在外部范围中定义，并且事实上，您的隔离范围定义 item 与外部范围无关。

如果您只想嵌入模板而不保留对其原始范围的引用，您可以使用以下指令而不是 ng-transclude :

app.directive('customTransclude', function(){
    return {
        link: function(scope, element, attrs, ctrls, transcludeFn){
            if(!transcludeFn){
                throw 'Illegal use of custom-transclude directive! No parent directive that requires transclusion was found';
            }

            transcludeFn(scope, function(clone){
                element.empty().append(clone);
            });
        }
    };
});

然后在您的 repeat-contents 的模板中指令你可以像这样使用它:

<div ng-repeat="item in items">
    <em>Outside transclude: {{item}}</em><br/>
    <custom-transclude></custom-transclude>
</div>