2014-10-17 9 views
5

Avevo intenzione di utilizzare un modello su più viste con controller diversi.
Quali sono le migliori pratiche di utilizzo di ngIncludere con la sintassi ControllerAs?

Ma ora mi rendo conto che non posso semplicemente scrivere il binding universale nei modelli perché i valori verranno inseriti all'interno di $scope.concreteControllerName.

docs angolari per ngInclude dicono che

Questa direttiva crea nuovo ambito.

ho potuto utilizzare ng-init direttiva e passare esempio controller per la portata del modello:

<ng-include src="..." ng-init="controller=concreteControllerName"/> 

o meglio ancora

<ng-include src="..." ng-init="model=getModelForTemplate()"/> 

e poi scrivere {{controller.boundvalue}} nel modello.

Questa è una soluzione funzionante, immagino.

E qui mi piacerebbe sapere se esistono altri approcci migliori e in caso contrario, i modelli dovrebbero sempre essere utilizzati con qualche nozione di modello passato per astrarre dall'ambito principale?

+1

Dai un'occhiata a questa [domanda SO] (http://stackoverflow.com/questions/13422966/how-to-specify-model-to-a-include-directive- in-angularjs/20639139 # 20639139) - diverse risposte ci sono grandi. –

risposta

3

Utilizzare John Papa's controllerAs View Syntax e controllerAs with vm. Si specificano diversi controller nelle direttive ng-include ma si utilizza lo stesso modello di src html. Il nome della variabile comune vm viene utilizzato nel modello.

index.html

<div ng-include ng-controller="controllerOne as vm" src="'same.html'"></div> 
<div ng-include ng-controller="controllerTwo as vm" src="'same.html'"></div> 
<div ng-include ng-controller="controllerThree as vm" src="'same.html'"></div> 

controllerOne.js

function controllerOne() { 
    var vm = this; 
    vm.name = 'Controller One!'; 

sharedTemplate.html

<div>{{vm.name}}</div> 

Ecco una versione funzionante completa: Full Working Code in Plunker

+0

Sarebbe bello, nel Plunker, mostrare come si farebbe riferimento al controller genitore dal controller figlio (senza usare $ scope). –