Come caricare dinamicamente più modelli utilizzando AngularJS?

Question

Sono nuovo di AngularJS, proveniente da un background PHP in cui faccio tutto l'aggregazione modello sul server. Con PHP vorrei prendere diversi modelli, schiacciarli insieme, quindi inviarli al browser dei client. AngularJS mi consente di inserire un modello usando ng-view. Questo è ottimo, ma non gestisce il caso in cui il modello che inserisco possa includere tag che sono segnaposto per altri modelli. Ad esempio, posso avere la seguente come uno dei miei modelli:

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

In PHP Vorrei inserire questo modello, quindi sostituire il contenuto di {content} con un altro modello. In AngularJS So come inserire il modello principale (usando ng-view), ma non sono sicuro di come caricare dinamicamente il mio "modello parziale" nel tag {content}. Come si può fare con AngularJS?

Answer 1

Un approccio diretto sarebbe quello di utilizzare il ngInclude directive:

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

Poi, nel controller che è associato con questo modello è possibile definire la variabile templatePath dinamicamente:

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

Answer 2

Utilizzando ng-view al nido più modelli non è attualmente supportata nativamente in Angular.js. Esistono, tuttavia, più opzioni per emulare tale funzionalità. Vedere le risposte in this SO question per diverse di queste opzioni, incluso l'interfaccia utente suggerito da akonsu.