Флажок не привязан к сфере действия в 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">

Теперь он работает так, как ожидалось. Я знал это объяснение, но забыл, может, кто-то заполнит его для меня.:)