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: It 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: 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.
<!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 (includes 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: 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.
<!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 DOM element. |
| $watch is a way of triggering changes in digest. | $observe watches chnages in interpolation ({{}}) elements. |
| $watch uses $scope to watch changes in its values. | $observe is used in linking function of dierectives. |
