How to effectively use $watch, $digest, and $apply in AngularJS?
13/03/2024
•
5
min
The AngularJS $scope object contains several helpful methods and properties which help us to build applications. $watch, $digest, and $apply are core functions on the scope of AngularJS. Interestingly, they're a bit tricky to understand, but let's go step by step and see how to effectively use $watch, $digest, and $apply.
$watch
This is used to watch the changes in a scope variable.
Here is an example on how to use $watch:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'John Doe';
$scope.$watch('name', function(newValue, oldValue) {
console.log('Changed!');
console.log('Old: ' + oldValue);
console.log('New: ' + newValue);
});
});
</script>
</body>
</html>
Ask your specific question in Mate AI
In Mate you can connect your project, ask questions about your repository, and use AI Agent to solve programming tasks
In the above example, we are using $watch to monitor changes in the "name" model. Whenever the model changes, the function passed as the second parameter to $watch() is triggered.
$digest
This function iterates through all of the watchers in the $scope object, and its child objects (if it has any). This should be called whenever any models that the $watch'ers are watching have changed.
See this example:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
$scope.name = 'John Doe';
// Change name after 2 seconds
setTimeout(function () {
$scope.$apply(function () {
$scope.name = 'John Smith';
});
$scope.count++;
console.log("$scope.count: " + $scope.count);
$scope.$digest();
}, 2000);
$scope.$watch('name', function(newValue, oldValue) {
console.log('Changed!');
console.log('Old: ' + oldValue);
console.log('New: ' + newValue);
});
});
</script>
$apply
The $apply() function takes a function or an AngularJS expression, executes it, then calls $digest() to update any bindings or watchers.
In the above $digest example, we're changing "name" and calling $apply() to execute the function inside it, then calling $digest() so that any watchers watching the models would get updated.
The above example with $apply is a good way to understand the connection between $apply, $digest, and $watch.
Remember, while using $digest and $apply, we have to handle the exception because it may throw an error if the digest cycle is already in progress. One way to handle the exception properly is as follows:
```html
try {
$scope.$digest();
} catch(e) {
console.log("Error: " + e);
}
```
There are also several other methods for handling this.
If you take a closer look at $watch, $digest, and $apply, AngularJS provides these low-level APIs to developers to create watchers, manually start the digestion cycle, and apply changes to start the digestion cycle. These are especially useful when creating custom directives or integrating with other libraries.
AI agent for developers
Boost your productivity with Mate:
easily connect your project, generate code, and debug smarter - all powered by AI.
Do you want to solve problems like this faster? Download now for free.