$ 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);