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: 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= 
"http://code.angularjs.org/1.0.6/angular.min.js"> 
    </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:
Output1

$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= 
"http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> 
    </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:
Output1

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.

My Personal Notes

Recommended Posts: