2013-04-10 6 views
18

Первая очередь, plunker: http://plnkr.co/edit/v1uTz5Угловое - не ngModel обновления при вызове внутри ngInclude

Это рабочая демо вопроса я впадающей.

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

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

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

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

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

+0

См. Http://stackoverflow.com/questions/11412410/angularjs-losing-scope-when-using-ng-include –

ответ

30

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

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

Your Plunker Modified

Read this article on angular wiki for more detailed explanation

+1

Очень просто, и я знал это все время, но я никогда не понимал причины. Спасибо за статью. Он должен определенно получить больше репутации на своем сайте. –

+0

Спасибо, ты сохранил несколько часов. –

+0

Угловая вики ссылка больше недействительна. – Neel

5

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

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

1

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

Смежные вопросы