Подтвердить что ты не робот

Angularjs - ng-switch не привязывает ng-модель

У меня есть этот http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq, который показывает, когда я нажимаю "Title3" и вводим значение в текстовое поле, хотя введенное значение отображается в пользовательском интерфейсе, когда Я нажимаю кнопку 'click' для атрибута области $scope.test ничего не привязано.

Я не знаю, что не так с ng-switch или, может быть, я что-то делаю неправильно. Помощь приветствуется.

http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq

4b9b3361

Ответ 1

Это проблема наследования области видимости из-за ng-switch создания собственной области.

Одна рекомендация, сделанная часто, всегда заключается в использовании dot для моделей. Причина в том, что когда элемент области контроллера является объектом, а не примитивным, суб-области будут создавать ссылку на исходный объект. Если модель является примитивной, она не будет обновлять оригинал.

Например:

<input ng-model="test.value" placeholder="pre" type="text" />
$scope.test={value:''}

Другим подходом является использование $parent в разметке модели html:

<input ng-model="$parent.test" placeholder="pre" type="text" />

Использование методологии dot - хорошая практика, чтобы избежать этих проблем, поскольку вам не нужно думать о более глубоких вложенных областях.

Демо с использованием test.value в качестве модели: http://plnkr.co/edit/CkiF55bLXsYzR6ZjcrJp?p=preview

Ссылка на dot в моделях (ценное чтение): https://github.com/angular/angular.js/wiki/Understanding-Scopes

Ответ 2

Это потому, что вы фактически создаете дочернюю область внутри ng-переключателя. Таким образом, существует другое свойство test в области, относящейся к директиве ngSwitch. Сначала он отобразит значение из родительской области, но когда вы его отредактируете, потому что это примитив, он редактирует только значение для дочернего элемента, а не родителя. Прототипическое наследование здесь не вступает (но это то, что нам нужно).

При нажатии кнопки кнопка предупреждает /console.logging свойство в родительской области..., которое ребенок не может изменить.

Чтобы исправить это использование $parent.test в вашем атрибуте ng-model в вашем ngSwitch:

фрагмент:

<span class="pew"  ng-switch-when="title2">
  <input ng-model="$parent.test" placeholder="pre" type="text" />
  {{test}}
</span>

И вот вилка вашего плункера, показывающая его в действии.

Ответ 3

Я столкнулся с подобной проблемой, и я решил, создав переменную области видимости в контроллере и использовал ее с помощью ng-include и ng-switch. Таким образом, если у вас есть глубокий вложенный ng-include с ng-switch, и он продолжается, мы все равно можем использовать эту переменную области видимости.

Поскольку все дочерние области (здесь, ng-include/ng-switch) простирается от родительской области (как правило, с областью контроллеров), мы можем напрямую получить доступ к родительской области с помощью в этих дочерних областях без проблема.

Использование $parent потребует написать как $parent.$parent.$parent.someProp

Пример Plunk: http://plnkr.co/edit/8UGH7nUpFmATiXfkYSwr?p=preview