AngularJS Bereich in Richtlinie umwandeln mit ng-repeat

Question

Mein Ziel ist es, eine Direktive, die ich Inhalt geben, und es wiederholt sie X-mal. Genau wie ng-repeat, möchte ich es nur in andere Features wie limit toggle und extra Elemente außerhalb des übertragenen Inhalts einbinden.

Aus irgendeinem Grund hat die Transklusion keinen Zugriff auf den Direktivenisolatbereich, egal was ich versuche.

Ich habe die transclude Funktion innerhalb link, in mehreren Variationen, vergeblich verwendet. Hier ist eine Demo:

• Plunkr

Und hier ist der Kern des Codes:

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); 
     }); 
    } 
    } 
}); 

Wenn man sich die plunkr betrachten, werden Sie außerhalb der Einbindung sehen, dass {{item}} verfügbar ist, aber nicht drinnen. Unabhängig vom Inhalt der link-Funktion, der sich darum kümmern sollte. Irgendeine Idee, was ich tun kann?

Answer 1

transclude:true transcludes den Inhalt, während eine Bezugnahme auf den Rahmen zu halten, wo der Inhalt von (in unserem Fall transkludiert, wird repeat-contents<other-directive other-item="item"></other-directive> transcluden, während eine Bezugnahme auf den äußeren Umfang zu halten. item nicht im äußeren Umfang und dadurch definiert, dass Ihr isolierten Bereich definiert item auf dem äußeren Umfang irrelevant ist

Wenn Sie nur die folgende diective statt ng-transclude die Vorlage möchten transcluden ohne Sie verwenden können, einen Verweis auf seinen ursprünglichen Umfang zu halten.

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); 
      }); 
     } 
    }; 
}); 

und dann in der Vorlage Ihrer repeat-contents Richtlinie können Sie es wie folgt verwenden:

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