复选框未绑定到angularjs中的范围

Question

我正在尝试使用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"/>

当我选中该框时,控制台会记录错误,当我取消选中该框时,控制台会再次记录错误.我也在范围上有一个订单模型,如果我将复选框的模型更改为order.billing_is_shipping,它工作正常

Answer 1

我有一段时间在这个问题上挣扎.有效的是将输入绑定到对象而不是基元.

<!-- Partial -->
<input type="checkbox" ng-model="someObject.someProperty"> Check Me!

// Controller
$scope.someObject.someProperty = false

Answer 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

Answer 3

在我的指令中(在链接函数中)我创建了范围变量成功,如下所示:

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">

它现在按预期工作.我知道对此的解释,但忘了,也许有人会为我填写.:)

Answer 4

扩展Matt的答案,请参阅Applehead.io视频,该视频解决了这个问题并提供了解释: 为什么直接绑定属性到$ scope会导致问题

请参阅:https://groups.google.com/forum/#!topic/angular/7Nd_me5YrHU

通常这是由于你的ng-controller和你正在创建新范围的输入之间的另一个指令.当select写出它的值时,它会将它写入最近的范围,因此它会将它写入此范围而不是更远的父级.

最好的做法是永远不要直接绑定到范围内的变量ng-model,这也被称为在你的ngmodel中总是包含一个"点".