Understanding watch, watchgroup and watchCollection methods of scope

Posted by Ravi Verma New 0 0 0 0 0

$watch
The $watch functions in Angular are essentially used to basically synchronize the view and the model.The $watch function observes the changes in a variable on the $scope or we can say that it observe the model and when the digest loop runs, it then executes those $watch functions thereby allowing the UI to be updated with those new model property values.
It accepts three parameters: expression, listener and equality object, where listener and equality object are optional parameters.
1
$watch(watchExpression, listener, [objectEquality])
Here, watchExpression is the expression in the scope to watch. This expression is called when the digest loop runs and returns …show more content…
1
2
3
4
5
6
7
8
9
10
11 angular.module("MyApp", []) .controller("MyCtrl",["$scope", "$timeout", function($scope, $timeout) { $scope.colors = ["white","purple","pink"]; $scope.$watchCollection("colors", function(newList, oldList) { console.log("new list: " + newList); console.log("old list: " + oldList); }); $timeout(function() { $scope.colors.push("gray"); }, 2000); }]);
$watchGroup
$watchGroup function is introduced in Angular1.3. It works same as $watch() function but it accept an array of expressions as the first parameter instead of single expression..
1
$watchGroup(watchExpression, listener)
The listener is passed as an array with the new and old values for the watched variables. The listener is called whenever any expression in the watchExpressions array changes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 angular.module("MyApp", []) .controller("MyCtrl",["$scope", "$timeout", function($scope, $timeout) { $scope.message1 = "First Message!"; $scope.message2 = "Second