AngularJS $apply() $digest() $watch()
$apply() , $digest(), $watch() are the core element of AngularJS application . AngularJS support data binding ,than means change in
one html control property will effect the other part of binding.Basically model is updated when you change
html control property.$apply() , $digest() , $watch() are used to observed the changes when data bind any part changes.
- $watch() : $watch function watch the changes of variable in the $scope object.$watch function is attached with all $scope variable .Changes made in this variable update binding .The $watch() function is also used for custom watch for any events.
- $digest() : Any changes made in $watch() variable ,$digest() function call corresponding event listener functions and update those values in view with new values.$digest() iterates through all the watches and checks any value updated.
- $apply():$apply() function is used to execute expressions in DOM area. $apply() function forcefully finishes execution and it will call $digest() function to update all data bindings.
Live Demo
Code
<div>
<!DOCTYPE
html>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script
type="text/javascript">
var
app = angular.module('myApp',
[]);
app.controller('myController',
function
($scope)
{
$scope.newval
= '';
$scope.oldval
= '';
$scope.$watch('myModel',
function
(newval, oldval) {
$scope.newval
= newval;
$scope.oldval
= oldval;
});
var
event = document.getElementById("btndigest");
event.addEventListener('click',
function
() {
$scope.currentDateTime
= new
Date();
$scope.$digest();
});
$scope.Apply
= function
()
{
return
$scope.msg = "Example
of Manually Apply.";
$scope.$apply();
};
});
</script>
</head>
<body>
<div
ng-app="myApp"
ng-controller="myController">
<div
style="width:
300px;">
<fieldset>
<legend>Example
of Watch</legend>Enter
Text:<input
type="text"
ng-model="myModel"
/><br
/>
<span>Old
Value :{{oldval}}</span><br
/>
<span>New
Value :{{newval}}</span><br
/>
</fieldset>
<fieldset>
<legend>Example
of Digest</legend>
<input
type="button"
value="Click
to digest."
id="btndigest"
/>
<span>Current
Date Time :{{currentDateTime}}</span><br
/>
</fieldset>
<fieldset>
<legend>Example
of Apply</legend>
<input
type="button"
value="Click
to Apply Manually."
id="Button1"
ng-click="Apply()"
/>
<span>Current
Date Time :{{msg}}</span>
</fieldset>
</div>
</div>
</body>
</html>
</div>
$digest() example set the current date time in the scope variable when click ,if found any changes , corresponding event listener is call to update view.
$apply() example set the scope variable to a specific string.When
$apply() is called , it forced to call $digest().
