AngularJS: Der in der Direktive enthaltene Inhalt verschwindet

Question

Ich habe eine Liste in meinem Controller, die von ng-repeat verwendet wird, um meine Direktive zu erstellen. In meiner Richtlinie verwende ich die Transklusion, um an das Element der Richtlinie anzuhängen.

Beim Hinzufügen des ersten Elements zu meiner Liste scheint es wie erwartet zu funktionieren, aber wenn ein zweites Element hinzugefügt wird, verschwindet der übersetzte Inhalt aus dem Element des ersten Elements. Das macht für mich keinen Sinn, deshalb muss ich etwas falsch verstehen.

Ich habe eine example erstellt, die das Problem neu erstellt.

Nach dem ersten Element hinzugefügt wird, sucht der HTML wie erwartet:

<div ng-controller="ctrl as c" class="ng-scope"> 
    <test ng-repeat="item in c.items track by $index" item="item" class="ng-scope ng-isolate-scope"> 
     <div class="ng-binding">1</div> 
     <span class="ng-scope">Transcluded</span> 
    </test> 
</div> 

Nach dem zweiten Element hinzugefügt wird, der transkludiert Inhalt ist nicht mehr in dem Element des ersten Elements!

<div ng-controller="ctrl as c" class="ng-scope"> 
    <test ng-repeat="item in c.items track by $index" item="item" class="ng-scope ng-isolate-scope"> 
     <div class="ng-binding">1</div> 
    </test> 
    <test ng-repeat="item in c.items track by $index" item="item" class="ng-scope ng-isolate-scope"> 
     <div class="ng-binding">2</div> 
     <span class="ng-scope">Transcluded</span> 
    </test> 
</div> 

HTML:

<div ng-app="ui"> 
    <div ng-controller="ctrl as c"> 
    <test ng-repeat="item in c.items track by $index" item="item">Transcluded</test> 
    </div> 
</div> 

Typoskript:

var app = angular.module('ui', []); 

class Controller { 
    public items = []; 

    constructor($timeout) { 
    $timeout(() => this.items.push({Id: 1}), 1000); 
    $timeout(() => this.items.push({Id: 2}), 2000); 
    } 
} 
app.controller('ctrl', ['$timeout', Controller] 

app.directive('test', function($compile) { 
    return { 
    scope: { 
     item: '=' 
    }, 
    transclude: true, 
    template: "<div>{{item.Id}}</div>" 
    link: function(scope, element, attrs, controller, transcludeFn) { 
     console.log("Appending transcluded content to " + scope.item.Id) 
     let e = transcludeFn(); 
     element.append(e); 
    } 
    }; 
}); 

JSFiddle: https://jsfiddle.net/rmytw9cr/2/

Answer 1

Sofern Sie die transcluden Funktion verwenden müssen, verwenden Sie es nicht (Kasse transclution auf google für mehr Info, es ist ein bisschen komplex, Sie können zum Beispiel das übertragene p kompilieren Kunst mit Umfang Ihrer Wahl).

Sie können die Transclude-Anweisung für eine einfache Transcution verwenden.

Versuchen Sie, die folgende Vorlage, und entfernen Sie die transcluden aus Ihrer Richtlinie:

template: "<div><div>{{item.Id}}</div><div ng-transclude></div></div>" 

Update: Um die Einbindung Funktion zu nutzen, müssen Sie verstehen, wie es funktioniert. Die Transclusion-Funktion ruft einen Rückruf als erstes Argument ab. Die Callback-Funktion erhält dann als erstes Argument das übertragene HTML-Element.

So ist der richtige Weg, es zu benutzen, wäre:

transcludeFn(function(compiledHtml) { 
    // Do what ever you want with the complied HTML 
    // For example: element.append(compiledHtml); 
}); 

Die Funktion Einbindung auch ein weiteres Argument bekommen kann, was der Umfang ist die HTML mit kompilieren.

transcludeFn(someScope, function(compiledHtml) { 
    // Do what ever you want with the complied HTML 
    // For example: element.append(compiledHtml); 
}); 

Und für das Finale - der Rückruf kann auch ein zweites Argument bekommen, das die transkludierte sind: In diesem Fall sollten Sie den Umfang als erstes Argument und den Rückruf mit der kompilierten HTML als zweiten liefern Umfang:

transcludeFn(someScope, function(compiledHtml, transScope) { 
    // Do what ever you want with the complied HTML 
    // For example: element.append(compiledHtml); 
    // Here transScope will be the same as someScope 
}); 

transcludeFn(function(compiledHtml, transScope) { 
    // Do what ever you want with the complied HTML 
    // For example: element.append(compiledHtml); 
    // Here transScope will be the same as directive scope 
});