almost 9 years ago
The angularjs $watch, $digest and $apply are essential parts. You must know the difference between them. Here we are going to discuss them.
$watch():
In Angular, you often need to do data binding to modify data. When you do some data binding on $scope to your view, AngularJS creates a watch. That means watch looks for change in variable on $scope object. The AngularJS framework watches a variable using $scope.$watch() function. When you create a watch, there are two parameters passed:
1. value function
2. listener function
The value function returns the value that is being watched by $watch function. This is how it can check the value returned to the last value. If the value is changed, then listener function is called. Then you can do whatever you want to listener function.
$digest():
$scope.$digest() function runs in a loop over all the watches that are created by angular. It will call the listener function if the value is changed in the scope object.
$apply():
$scope.$apply() is used to execute a function as a parameter and after that $digest() function is called. That means all the watches are checked that are created and the data binding is refreshed.
Here is an example:
<div ng-controller=newController">{{data.time}}<br/><button ng-click=refresh()>refresh time - ng-click</button><button id=refreshButton >refresh time</button></div><script>var module = angular.module(demoApp, []);var newController1 = module.controller("newController", function($scope) {$scope.data = { time : new Date() };$scope.refresh = function() {$scope.data.time = new Date();}document.getElementById("refreshButton").addEventListener('click', function() {console.log(refresh time clicked");$scope.data.time = new Date();});});</script>
<div ng-controller=newController">
{{data.time}}
<br/>
<button ng-click=refresh()>refresh time - ng-click</button>
<button id=refreshButton >refresh time</button>
</div>
<script>
var module = angular.module(demoApp, []);
var newController1 = module.controller("newController", function($scope) {
$scope.data = { time : new Date() };
$scope.refresh = function() {
$scope.data.time = new Date();
}
document.getElementById("refreshButton")
.addEventListener('click', function() {
console.log(refresh time clicked");
$scope.data.time = new Date();
});
});
</script>
Can you help out the community by solving one of the following Javascript problems?
Do activity (Answer, Blog) > Earn Rep Points > Improve Rank > Get more opportunities to work and get paid!
For more topics, questions and answers, please visit the Tech Q&A page.
0 Comment(s)