Angular - ngModel не обновляется при вызове внутри ngInclude

Прежде всего, плункер: http://plnkr.co/edit/v1uTz5

Это рабочая демонстрация проблемы, с которой я сталкиваюсь.

У меня есть ng-include, чтобы включить частичный.

Внутри частичного текста есть текстовый ввод с директивой ngModel AND.

Модель обновляется соответственно внутри include, но любое взаимодействие за пределами include игнорируется. {{test}} вне include не обновляется, но внутри {{test}} делает.

Директива при вызове обрабатывает ключ enter и вызывает правильную область действия и функцию. Однако переменная $scope.test никогда не обновлялась, но $scope.testFinal обновляется, а шаблон ng-include отображает ее соответствующим образом. Попытка использовать reset модель $scope.test тоже не работает.

Я что-то упустил? Или это ошибка с директивой или с ng-include?

Ответ 1

Вместо использования примитива для определения переменной сделайте его объектом.

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

Директивы создают свою собственную область для каждого элемента. Когда вы приравниваете примитив к новой переменной области видимости, она не имеет привязки к оригиналу, однако, когда оригинал является объектом, создается ссылка, а не копия, а сделанные изменения будут отражены в другом

Простой пояснительный пример:

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

теперь делают то же самое с объектом:

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

Изменен ваш плункер

Прочитайте эту статью в wiki angular для более подробного объяснения

Ответ 2

Джон Линдквист имеет видео об этом. Хотя он не совсем объясняет, почему вам нужно использовать объект.

В основном каждый раз, когда появляется новая неизолированная область видимости, каждое свойство родительской области копируется в новую область действия и, как объясняет @charlietfl, копирование примитивного типа действительно создает копию "но с объектами то, что вы получаете, является ссылкой, следовательно, изменения глобальны.

Ответ 3

ng-include создает свою собственную область действия и отличается от внешней области. Используйте this.test вместо $scope.test внутри шаблона ng-include. Он будет работать правильно.