$ watch不会触发数据更改
我有一个针对ui-select2下拉列表(来自ui-bootstrap)的手表设置。 手表在负载上启动,但没有数据变化,我不明白为什么。
这不是通常的问题,没有申请模型的变化,也没有使用第三个参数进行平等比较(至less从我的代码)。
我需要做些什么才能把它烧掉?
这是一个展示这个问题的普普通通。
我修理了一些东西。
http://plnkr.co/edit/5Zaln7QT2gETVcGiMdoW?p=preview
JS
var myMod = angular.module("myApp",[]).controller("MainController", function($scope){ $scope.myModel = {selectedId:null}; }).controller("DetailController",function($scope){ $scope.items = [1,2,3,4]; $scope.watchHitCount = 0; $scope.$watch('myModel.selectedId', function(newVal, oldVal){ console.log(newVal + " " + oldVal); $scope.watchHitCount++; },true); });
index.html
<body ng-app="myApp"> <div ng-controller="MainController"> <ng-include src="'detail.html'" ng-controller="DetailController"></ng-include> </div> </body>
detail.html
<pre>watch hit: {{watchHitCount}}</pre> <pre>selected value: {{myModel.selectedId}}</pre> <select ng-model="myModel.selectedId" ui-select2=""> <option></option> <option ng-repeat="item in items" value="{{item}}">{{item}}</option> </select>
它抱怨没有find控制器,所以我按照通常的方式设置了一个名为ng-app的模块,并且声明了一个定义了控制器的模块。
我还添加了一个对象来保存模型中的值。 使用$ scope对象作为你的模型是不好的做法,相反你的作用域应该引用一个你的模型的对象。
尝试传递true
作为第三个参数.$watch()
$rootScope.Scope
文档
$watch(watchExpression, listener, objectEquality)
objectEquality(可选) – {boolean =} – 比较对象的相等性而不是参考。
有一个简单的解决办法,用复杂的对象而不是简单的variables手表
例如(不要使用)
$scope.selectedType=1;//default $scope.$watch( function () { return $scope.selectedType; }, function (newValue, oldValue) { if (!angular.equals(oldValue, newValue)) { $scope.DoWork(); } }, true);
但在下面使用
$scope.selecteditem={selectedType:1}; $scope.$watch( function () { return $scope.selecteditem.selectedType; }, function (newValue, oldValue) { if (!angular.equals(oldValue, newValue)) { $scope.DoWork(); } }, true);
请注意,第二个示例中的“selectedTypes”位于对象内部,而不仅仅是scopevariables。 即使在旧的Angular版本中,这也可以工作。
如果你使用控制器的方法,一些阅读可能会提示这样的语法:
var myController = { myValue: 1 }; $scope.$watch('$ctrl.myValue', function () { ... }, true);
相反,只需将这个字段包装在一个这样的函数中:
var myController = { myValue: 1 }; $scope.$watch(function () { return myController.myValue; }, function () { ... }, true);
- 点击外部时,隐藏Angular UI Bootstrappopup窗口
- 在Angular UI-Bootstrap中,“解除”模态和“closures”模态有什么区别?
- 结合AngularJS和Twitter Bootstrap的最佳方式
- 响应式下拉导航栏与angular度UI引导(完成在正确的angular度types的方式)
- 使用JavaScript在AngularJS Bootstrap UI中调用模态窗口
- 如何使用HTML内容创buildAngularJS UI引导popup窗口?
- 我应该使用Angular UI Bootstrap还是纯Bootstrap 3?
- Angular引导dateselect器date格式不会格式化ng模型值
- 如何从任何地方closuresAngular UI Modal