Флажок не привязан к сфере действия в angularjs
Я пытаюсь привязать флажок к области видимости с помощью ng-model. Начальное состояние флажка соответствует модели области просто отлично, но когда я устанавливаю/снимаю флажок, модель не изменяется. Следует отметить, что шаблон динамически загружается во время выполнения, используя ng-include
app.controller "OrdersController", ($scope, $http, $location, $state, $stateParams, Order) ->
$scope.billing_is_shipping = false
$scope.bind_billing_to_shipping = ->
console.log $scope.billing_is_shipping
<input type="checkbox" ng-model="billing_is_shipping"/>
Когда я устанавливаю флажок, консоль регистрирует false, когда я снимаю флажок, консоль снова регистрирует ложь. Я также имею модель заказа в области, и если я изменю модель флажка, чтобы быть order.billing_is_shipping, она отлично работает
Ответы
Ответ 1
Я некоторое время боролся с этой проблемой. Что было связано с тем, чтобы привязать вход к объекту вместо примитива.
<!-- Partial -->
<input type="checkbox" ng-model="someObject.someProperty"> Check Me!
// Controller
$scope.someObject.someProperty = false
Ответ 2
Если шаблон загружен с помощью ng-include
, вам нужно использовать $parent
для доступа к модели, определенной в родительской области, начиная с ng-include
, если вы хотите обновить ее, щелкнув по ней.
<div ng-app ng-controller="Ctrl">
<div ng-include src="'template.html'"></div>
</div>
<script type="text/ng-template" id="template.html">
<input type="checkbox" ng-model="$parent.billing_is_shipping" ng-change="checked()"/>
</script>
function Ctrl($scope) {
$scope.billing_is_shipping = true;
$scope.checked = function(){
console.log($scope.billing_is_shipping);
}
}
DEMO
Ответ 3
Развернувшись на Ответ Matt, см. это видео Egghead.io, в котором рассматривается эта самая проблема, и приводится объяснение: Почему привязка свойств непосредственно к $scope может вызвать проблемы
см. https://groups.google.com/forum/#!topic/angular/7Nd_me5YrHU
Обычно это связано с другой директивой между вашим ng-контроллером и ваш ввод, создающий новую область. Когда запись выбора внесите его значение, оно будет записывать его до самой последней области, поэтому будет записывать его в эту область действия, а не родитель, далеко.
Лучшей практикой является никогда не привязывать напрямую к переменной в области в ng-model
, это также известно, как всегда, включая "точку" в ваш ngmodel.
Ответ 4
В моей директиве (в функции ссылки) я создал переменную переменной области видимости следующим образом:
link: function(scope, element, attrs) {
"use strict";
scope.success = false;
И в шаблоне области включается входной тег, например:
<input type="checkbox" ng-model="success">
Это не сработало.
В конце я изменил свою переменную области видимости следующим образом:
link: function(scope, element, attrs) {
"use strict";
scope.outcome = {
success : false
};
И мой тег ввода выглядит следующим образом:
<input type="checkbox" ng-model="outcome.success">
Теперь он работает так, как ожидалось. Я знал это объяснение, но забыл, может, кто-то заполнит его для меня.:)