2013-04-10 2 views
18

In primo luogo, il plunker: http://plnkr.co/edit/v1uTz5angolare - non ngModel l'aggiornamento quando viene chiamato all'interno ngInclude

Questa è una demo di lavoro del problema che sono in esecuzione in.

Ho un ng-include per includere un parziale.

All'interno del parziale ho un input di testo con ngModel E direttiva.

Il modello si aggiorna di conseguenza all'interno dell'inclusione, ma qualsiasi interazione al di fuori dell'inclusione viene ignorata. Lo {{test}} non incluso nell'aggiunta non viene aggiornato, ma all'interno lo è {{test}}.

La direttiva, quando chiamata, gestisce la chiave enter e chiama l'ambito e la funzione corretti. Tuttavia, la variabile $scope.test non è mai stata aggiornata, ma $scope.testFinal viene aggiornato e il modello ng-include lo rende correttamente. Anche il tentativo di ripristinare il modello $scope.test non funziona.

Mi manca qualcosa qui? O si tratta di un bug con la direttiva o con lo ng-include?

+0

Vedere http://stackoverflow.com/questions/11412410/angularjs-losing-scope-when-using-ng-include –

risposta

30

Anziché utilizzare una primitiva per definire la variabile, trasformarla in un oggetto.

$scope.model={test:''}; 

Le direttive creano il proprio ambito per ogni articolo. Quando si identifica una primitiva con una nuova variabile scope, non ha alcun legame con l'originale, tuttavia quando l'originale è un oggetto, viene creato un riferimento, non una copia e le modifiche apportate in una riflettono nell'altra

Semplice esempio esplicativo:

var a ='foo'; 
var b= a; 
/* now change a*/ 
a='bar'; 
alert(b) // is still 'foo' 

ora fare lo stesso con oggetto:

var obj_1= {a:'foo'}; 
var obj_2=obj_1; 
/* now change obj_1.a*/ 
obj_1.a='bar'; 
alert(obj_2.a) // change to obj_1 will also change obj_2 and alert returns "bar"*/ 

Your Plunker Modified

Read this article on angular wiki for more detailed explanation

+1

Molto semplice, e lo sapevo da sempre, ma non ne ho mai capito il motivo. Grazie per l'articolo. Dovrebbe sicuramente ottenere più rappresentanti sul loro sito. –

+0

Grazie, hai salvato diverse ore. –

+0

Il link wiki angolare non è più valido. – Neel

5

John Lindquist ha uno video su di esso. Anche se non spiega abbastanza il motivo per cui è necessario utilizzare un oggetto.

In pratica ogni volta che c'è un nuovo campo di applicazione non isolato, ogni proprietà del campo di applicazione genitore viene copiato il nuovo campo di applicazione e, come @charlietfl spiegato, la copia di un tipo primitivo davvero crea una "copia", ma con gli oggetti quello che ottieni è un riferimento, quindi le modifiche sono globale.

1

ng-include crea il proprio ambito ed è diverso dall'ambito esterno. Utilizzare this.test anziché $scope.test all'interno del modello ng-include. Funzionerà correttamente.