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

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

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

У меня есть ng-include для включения партиала.

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

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

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

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


angularjs angular-ngmodel angularjs-scope
person Tim Withers    schedule 10.04.2013    source источник
comment
См. stackoverflow.com/questions/ 11412410/   -  person Mark Rajcok    schedule 11.04.2013

Ответы (3)


arrow_upward
31
arrow_downward

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

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

Ваш плункер изменен

Читайте эту статью на вики angular для более подробного объяснения< /а>

person charlietfl    schedule 10.04.2013
comment
Очень просто, и я всегда это знал, но никогда не понимал причины. Спасибо за статью. Это определенно должно получить больше репутации на их сайте. - person Tim Withers; 11.04.2013
comment
Спасибо, вы сэкономили несколько моих часов. - person Nika Tsogiaidze; 10.03.2015
comment
Угловая вики-ссылка больше не действительна. - person Neel; 25.06.2015
comment
Это единственное решение, которое действительно сработало для меня. Использование this.varName или $parent.varName ничего не делает. Спасибо! - person Sam; 07.10.2015

arrow_upward
5
arrow_downward

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

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

person 7hi4g0    schedule 13.08.2013

arrow_upward
1
arrow_downward

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

person Rahul Jha    schedule 22.06.2015