我正在尝试使用 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,当我取消选中该框时,控制台会再次记录 false。我在范围上还有一个订单模型,如果我将复选框的模型更改为 order.billing_is_shipping,它就可以正常工作
我为这个问题苦苦挣扎了一段时间。有效的方法是将输入绑定到对象而不是基元。
<!-- Partial -->
<input type="checkbox" ng-model="someObject.someProperty"> Check Me!
// Controller
$scope.someObject.someProperty = false
如果使用
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);
}
}
在我的指令中(在 link 函数中),我创建了范围变量 success,如下所示:
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">
现在可以按预期工作了。我知道对此的解释,但忘记了,也许有人会帮我填写。 :)
扩展Matt 的答案,请参阅此 Egghead.io 视频,它解决了这个问题并提供了解释:为什么将属性直接绑定到 $scope 会导致问题
参见:https://groups.google.com/forum/#!topic/angular/7Nd_me5YrHU
通常这是由于 ng-controller 之间的另一个指令造成的 以及您创建新范围的输入。当选择写入 输出它的值,它会将其写入最新的范围,所以它 会将其写入此范围而不是更远的父范围 离开。
最佳实践是永远不要直接绑定到作用域上的变量 在
中,这也称为始终在其中包含一个“点” 你的 ngmodel。ng-model
这对我有用,因为我使用 1 和 0 而不是 true 和 false:
<input id="dialogIsInternal" type="checkbox" ng-model="dialog.is_internal" ng-true-value="1" ng-false-value="0" />