Understanding watch, watchgroup and watchCollection methods of scope
Posted By : Ravi Verma | 31-Mar-2015
$watch
The $watch functions in Angular are basically used to synchronize the view and the model.The $watch function notices 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 $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.
$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 the value that is being watched.
The listener defines a function which is called when there is any change in the value of the watchExpression. Listener will not be called If there is no change in the watchExpression.
The objectEquality is an optional parameter of type boolean which is used for comparing the objects for equality.
angular.module("MyApp", [])
.controller("MyCtrl",["$scope", "$timeout", function($scope, $timeout) {
$scope.message = "First Message!";
$scope.$watch("message", function(newval, oldval) {
console.log("new message: " + newval);
console.log("old message: " + oldval);
});
$timeout(function() {
$scope.message = "New Message!";
}, 2000);
}]);
$watchCollection
In addition to watching a single property on the scope, we can also watch a collection of properties on the scope, This function is used to watch the properties of an object and fires whenever any of the properties change. It takes an object as the first parameter and watches the properties of the object.
$watchCollection(object, listener)
The listener is called whenever anything within the object is changed.
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..
$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.
angular.module("MyApp", [])
.controller("MyCtrl",["$scope", "$timeout", function($scope, $timeout) {
$scope.message1 = "First Message!";
$scope.message2 = "Second Message!";
$scope.$watchGroup(["message1","message2"], function(newvalues, oldvalues) {
console.log("new message: " + newvalues);
console.log("old message: " + oldvalues);
});
$timeout(function() {
$scope.message1 = "New First Message!";
}, 2000);
$timeout(function() {
$scope.message2 = "New Second Message!";
}, 4000);
}]);
Hope You Find This Helpful
Thanks
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Ravi Verma
Ravi is a seasoned technologist with excellent experience in AngularJS , NodeJS and MEAN stack. He has good experience in developing complex UIs for web and mobile applications.