0

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.AngularJS Bereich in Richtlinie umwandeln mit ng-repeat

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:

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?

+0

ich nicht, was Sie bekommen konnte zu arbeiten gehen ... aber alternativ ich habe es an der Arbeit ohne die transclude durch nur die andere Direktive in die Vorlage zu setzen ... Hier ist die Plunkr für den Fall, dass überhaupt hilfreich ist https://plnrkr.co/edit/v7oFnukZxHMEi3xasFmc?p=preview – tarrball

+0

Das ist in Ordnung, wenn ich nur einen Anwendungsfall habe , aber in meinen Anwendungen muss ich eine Kopie dieser Direktive für jeden Anwendungsfall machen, der den Zweck einer Direktive besiegt – casraf

Antwort

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> 
+0

Ich bekomme diesen Fehler geworfen oder anders gesagt, dass transcludeFn keine Funktion ist. – casraf

+1

@casraf Sie müssen immer 'transclude: true' in Ihrer' repeatContents' Direktive verwenden. Ändern Sie nur "ng-transclude" in "custom-transclude". Hee ist ein funktionierender Plünderer. https://plnkr.co/edit/jl8veC?p=preview –

+0

Es scheint ein wenig klarer zu mir, wenn Sie den "Link" aus der repeatContents-Direktive in der Arbeitsdemo oben nehmen. Das zeigt, was tatsächlich passiert und warum Sie am Ende das zusätzliche "Other item:" sehen. – Craig