63

我正在尝试使用 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，它工作正常

4

4 回答 4

161

我在这个问题上挣扎了一段时间。起作用的是将输入绑定到对象而不是原语。

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

// Controller
$scope.someObject.someProperty = false
于 2014-05-29T22:15:37.090 回答
27

如果使用 加载模板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

于 2013-09-05T17:28:03.847 回答
9

在我的指令中（在链接函数中），我创建了范围变量成功，如下所示：

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

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

于 2014-04-06T09:53:32.990 回答
9

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

见：https ://groups.google.com/forum/#!topic/angular/7Nd_me5YrHU

通常这是由于您的 ng-controller 和正在创建新范围的输入之间的另一个指令。当 select 写出它的值时，它会把它写到最近的范围，所以它会把它写到这个范围而不是更远的父级。

最佳实践是永远不要直接绑定到范围内的变量ng-model，这也称为始终在 ngmodel 中包含“点”。

于 2016-03-22T23:35:12.740 回答