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. |