angularjs - error - Angular: ngModel no se actualiza cuando se llama dentro de ngInclude

use ng model angular 2

Question

En primer lugar, el plunker: http://plnkr.co/edit/v1uTz5

Esta es una demostración de trabajo del problema que estoy encontrando.

Tengo un ng-include para incluir un parcial.

Dentro del parcial tengo una entrada de texto con ngModel Y directiva.

El modelo se actualiza en consecuencia dentro de la inclusión, pero se ignora cualquier interacción fuera de la inclusión. El {{test}} fuera del include no se actualiza, pero el {{test}} dentro lo hace.

La directiva, cuando se llama, maneja la tecla de enter y llama al ámbito y función correctos. Sin embargo, la variable $scope.test nunca se ha actualizado, pero $scope.testFinal se actualiza y la plantilla ng-include la representa adecuadamente. Intentar restablecer el modelo $scope.test tampoco funciona.

¿Me estoy perdiendo de algo? ¿O es esto un error con la directiva o con el ng-include ?

Answer 1

En lugar de usar una primitiva para definir la variable, conviértala en un objeto.

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

Las directivas crean su propio alcance para cada elemento. Cuando se compara una primitiva con una nueva variable de alcance, no tiene enlace con el original, sin embargo, cuando el original es un objeto, se crea una referencia, no una copia, y los cambios realizados en uno se reflejarán en el otro

Ejemplo explicativo simple:

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

Ahora haz lo mismo con el objeto:

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"*/

Su Plunker Modificado

Lee este artículo en wiki angular para una explicación más detallada.

Answer 2

John Lindquist tiene un video respecto. Aunque no explica por qué necesitas usar un objeto.

Básicamente, cada vez que hay un nuevo ámbito no aislado, cada propiedad del ámbito primario se copia al nuevo ámbito y, como se explica en @charlietfl, copiar un tipo primitivo realmente crea una "copia" pero con los objetos lo que obtiene es una referencia. Por eso los cambios son globales .

Answer 3

ng-include crea su propio alcance y es diferente del alcance externo. Use this.test lugar de $scope.test dentro de ng-include template. Funcionará correctamente.