AngularJS transclude ng-repeat指令中的作用域

Question

我的目標是有一個指令，我給它的內容，並重復它們X次。就像ng-repeat一樣，只有我想將其包含在其他功能中，例如限制切換和超鏈接內容外的額外元素。

出於某種原因，無論我嘗試什麼，由於某種原因，跨接無法訪問指令隔離範圍。

我在link裏面使用了transclude函數，在幾種不同的情況下，都無濟於事。這裏有一個演示：

• 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，你會看到transclusion外{{item}}是可用的，但不在裏面。不管link函數的內容是應該照顧它的。任何想法我可以做什麼？

Answer 1

transclude:true，同時保持到所述內容是從transcluded（在我們的情況下，範圍的參考transcludes的內容，repeat-contents將transclude <other-directive other-item="item"></other-directive>，同時保持於外範圍的參考。item未在外部範圍和事實定義你的隔離範圍定義item是無關的外部範圍

如果你只是想transclude模板而不保持引用到它的原有範圍，你可以使用下面的diective而不是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>