Wie lade ich mehrere Vorlagen mit AngularJS dynamisch?

Question

Ich bin neu in AngularJS, komme aus einem PHP-Hintergrund, wo ich die gesamte Template-Aggregation auf dem Server mache. Mit PHP würde ich mehrere Vorlagen greifen, sie zusammenmischen und dann an den Client-Browser senden. AngularJS ermöglicht mir das Einfügen einer Vorlage mit ng-view. Das ist großartig, aber es behandelt nicht den Fall, dass die Vorlage, die ich einfüge, Tags enthalten kann, die Platzhalter für andere Vorlagen sind. Zum Beispiel kann ich folgendes als eine meiner Vorlagen:

<div class="some_class"> 
    <div class="another_class"> 
     {content} 
    </div> 
</div> 

In PHP ich diese Vorlage einfügen würde, dann den Inhalt {content} mit einer anderen Vorlage ersetzen. In AngularJS kann ich die Hauptvorlage einfügen (unter Verwendung von ng-view), aber ich bin mir nicht sicher, wie ich meine "Teilvorlage" dynamisch in das {content}-Tag laden kann. Wie soll das mit AngularJS geschehen?

Answer 1

wäre ein einfacher Ansatz die ngInclude directive zu benutzen

function MyCtrl($scope){ 
    $scope.templatePath = // define this var dynamically here 
} 

Answer 2

Die Verwendung von ng-view zum Verschachteln mehrerer Vorlagen wird derzeit nicht nativ in Angular.js unterstützt. Es gibt jedoch mehrere Optionen, um diese Funktionalität zu emulieren. Sehen Sie die Antworten in this SO question für einige dieser Optionen, einschließlich der ui-Router von Akonsu vorgeschlagen.

<div class="some_class"> 
    <div class="another_class"> 
    <ng-include src="templatePath"></ng-include> 
    </div> 
</div> 

Dann in Controller, der mit dieser Vorlage verknüpft ist Sie die templatePath Variable dynamisch definieren kann: