$ hours do not shoot data change

I have a clock setting against the ui-select2 dropdown menu model (from ui-bootstrap). The clock works when it boots, but not when the data changes, and I can’t understand why.

This is not a common problem if you do not apply the application to model changes or use the third parameter to compare equality (at least from my code).

What do I need to do to run it?

Here is a daemon demonstrating the problem.

+46
angularjs jquery-select2 angular-ui-bootstrap
Jul 22 '13 at 18:46
source share
4 answers

I fixed some things.

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> 

.Html details

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

He complained that he did not find the controller, so I configured it as usual with the name ng-app and the declared module on which the controllers are defined.

I also added an object to store the value in your model. It is bad practice to use the $ scope object as a model; instead, your area should reference the object that is your model.

+30
Jul 22 '13 at 18:57
source share

Try passing true as the third argument to .$watch()

$rootScope.Scope documentation

 $watch(watchExpression, listener, objectEquality) 

objectEquality (optional) - {boolean =} - Compare the object for equality, not for reference.

+100
Jul 22 '13 at 18:53 on
source share

There is a simple solution for this: use a clock with a complex object instead of a simple variable

For example (DON "T USE)

 $scope.selectedType=1;//default $scope.$watch( function () { return $scope.selectedType; }, function (newValue, oldValue) { if (!angular.equals(oldValue, newValue)) { $scope.DoWork(); } }, true); 

But use below

 $scope.selecteditem={selectedType:1}; $scope.$watch( function () { return $scope.selecteditem.selectedType; }, function (newValue, oldValue) { if (!angular.equals(oldValue, newValue)) { $scope.DoWork(); } }, true); 

note that the "slectedTypes" in the second example is inside the object, not just the scope variable. this will work even in older versions of Angular.

+10
Dec 30 '15 at 16:07
source share

If you use a controller - as an approach, some readings may offer syntax like this:

 var myController = { myValue: 1 }; $scope.$watch('$ctrl.myValue', function () { ... }, true); 

Instead, just wrap the field in a function like this:

 var myController = { myValue: 1 }; $scope.$watch(function () { return myController.myValue; }, function () { ... }, true); 
+2
Apr 7 '17 at 10:09 on
source share



All Articles