What is the difference between $watch and $observe in AngularJS ?
AngularJS provides different methods to observe/watch the changes in its elements and variables. The $observe and $watch are two different methods that serve this purpose. $observe is a method that is responsible to observe/watch the changes in the DOM attribute. We use $observe when we want to observe a DOM element that contains interpolation ({{}}).
Syntax:
<!-- Interpolation Element -->
attr1 = "Name: {{name}}"
<!-- Syntax of Observe in controller -->
attrs.$observe('attr1', function() {
// body
});
Example 1: Here when we click on the hyperlink(switch newest), the attribute gets true or false on the basis of the click event. The $observe is observing the changes in its DOM and putting the attribute values accordingly.
HTML
<!DOCTYPE html>
< html ng-app = "AngularObserveExample" >
< head >
< title >
What is the difference between $watch
and $observe in AngularJS ?
</ title >
< script src =
</ script >
< script >
var myApp = angular.module('observeApplication', []);
myApp.directive('focus', function () {
return function (scope, element, attrs) {
attrs.$observe('focus', function (newValue) {
newValue === 'true' && element[0].focus();
});
}
});
function MyCtrl($scope) {
$scope.cues = [{
text: 'text for the first item',
isNew: false
}, {
text: 'text for the second item',
isNew: true
}];
$scope.switchNewest = function () {
$scope.cues[1].isNew = !$scope.cues[1].isNew
$scope.cues[0].isNew = !$scope.cues[0].isNew
}
}
</ script >
</ head >
< body >
< div ng-app = "observeApplication" ng-controller = "MyCtrl" >
< ul >
< li ng-repeat = "cue in cues" class = "form-inline" >
< input type = "text" ng-model = "cues[$index].text"
focus = "{{cue.isNew}}" class = "input-xlarge" />
{{cue.isNew}}</ li >
</ ul >
< a ng-click = "switchNewest()" >switch newest</ a >
</ div >
</ body >
</ html >
|
Output:
$watch: To observe any expression, either function or a string we use a $watch method. It is a method on the $scope object, therefore, it can be used wherever you have access to a scope object (including any controller or linking functions in the directive). When we want to observe/watch any model/scope property we use $watch.
Syntax:
attr1 = "myModel.some_prop";
scope.$watch(attrs['attr1'], function() {
// body
});
Example 2: In this example, we are putting the text in the text field and as the cursor is up or down the function is called the changes are observed by $watch and we are displaying the count of the number of times a function is called.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
< script type = "text/javascript" >
var app = angular.module('watchApplication', []);
app.controller('watchCtrllr', function ($scope) {
$scope.countCheck = -1;
$scope.$watch('textval', function (newval, oldval) {
$scope.countCheck = $scope.countCheck + 1;
});
});
</ script >
</ head >
< body >
< div ng-app = "watchApplication" ng-controller = "watchCtrllr" >
< h2 >AngularJS $watch() Function Example</ h2 >
Enter Text:< input type = "text" ng-model = "textval" />
< br />< br />
< span style = "color:Red" >
No. of Times $watch()
Function Fired: {{countCheck}}
</ span >
</ div >
</ body >
</ html >
|
Output:
Difference Between $observe and $watch:
$watch
|
$observe
|
Observe changes in string/expression/function.
|
Observe changes in the DOM element.
|
$watch is a way of triggering changes in the digest.
|
$observe watches changes in interpolation ({{}}) elements.
|
$watch uses $scope to watch changes in its values.
|
$observe is used in the linking function of directives.
|
Last Updated :
08 Sep, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...