Skip to main content

Explain AngularJS $watch(), $digest() and $apply()


$watch() 


The $scope.watch() function is used to observe changes in a variable on the $scope. It accepts three parameters: expression, listener and equality object where listener and equality object are optional parameters.

<html>
<head>
 <title>AngularJS Watch</title>
 <script src="lib/angular.js"></script>
 <script>
 var myapp = angular.module("myapp", []);
 var myController = myapp.controller("myController", function ($scope) {
      $scope.name = 'nikssangani.blogspot.in';
      $scope.counter = 0;
      $scope.$watch('name', function (newValue, oldValue) {
         $scope.counter = $scope.counter + 1;
      });
 });
 </script>
</head>
<body ng-app="myapp" ng-controller="myController">
 <input ng-model="name" type="text" />
 Counter:
</body>
</html>

$digest()


 The $scope.$digest() function iterates through all the watches in the $scope object, and its child $scope objects (if it has any). When $digest() iterates over the watches, it checks if the value of the expression has changed. If the value has changed, AngularJS calls the change callback(listener) with the new value and the old value.

The $digest() function is called whenever AngularJS thinks it is necessary. For example, after a button click, or after an AJAX call. You may have some corner cases where AngularJS does not call the $digest() function for you. In that case, you may have to call this function yourself.

<html>
<head>
    <title>AngularJS Digest</title>
    <script src="lib/angular.js"></script>
    <script>
        var myapp = angular.module("myapp", []);
        var myController = myapp.controller("myController", function ($scope) {
            $scope.datetime = new Date();
            $scope.updateTime = function () {
                $scope.datetime = new Date();
            }
            document.getElementById("updateTimeButton").addEventListener('click', function () {
                console.log("update time clicked");
                $scope.datetime = new Date();
                console.log($scope.datetime);
            });
        });
    </script>
</head>
<body ng-app="myapp" ng-controller="myController">
    <button ng-click="updateTime()">Update time - ng-click</button>
    <button id="updateTimeButton">Update time</button>
    <br />
</body>
</html>


When you will click on the second button, the data binding is not updated. Since $scope.$digest() is not called after the second button's event listener is executed. In this way of clicking the second button the time will be updated in the $scope.data.time variable, but the new time will never be displayed.



To fix this issue you need to add a $scope.$digest() call to the second button event listener, like this:




<script type="text/javascript">
    document.getElementById("updateTimeButton").addEventListener('click', function () {
        console.log("update time clicked");
        $scope.datetime = new Date();
        //to update $scope
        $scope.$digest();
        console.log($scope.datetime);
    });


</script>






$apply() 





Angular does auto-magically updates only those model changes which are inside AngularJS context. When you do change in any model outside of the Angular context (like browser DOM events, setTimeout, XHR or third-party libraries), then you need to inform Angular of the changes by calling $apply() manually. When the $apply() function call finishes AngularJS calls $digest() internally, so all data bindings are updated.



In above example, instead of calling $digest() function inside the button listener function you can used the $apply() function like this:






<script>
    document.getElementById("updateTimeButton").addEventListener('click', function () {
        $scope.$apply(function () {
            console.log("update time clicked");
            $scope.datetime = new Date();
            console.log($scope.datetime);
        });
    });
</script>
















Labels:







Location:
New Zealand
























Comments











Post a Comment



















Popular posts from this blog




















How to write Unit Tests in .net




























Unit tests are automated tests that verify the behavior code like methods and functions. Writing unit tests is crucial to clean coding, as they help ensure your code works as intended and catches bugs early in the development process. I can share some tips for writing effective unit tests:    Write tests for all public methods Every public method in your code should have a corresponding unit test. This helps ensure that your code behaves correctly and catches any unexpected behavior early. public class Calculator {     public int Add(int a, int b) {         return a + b;     } } [TestClass] public class CalculatorTests {     [TestMethod]     public void Add_ShouldReturnCorrectSum() {         // Arrange         Calculator calculator = new Calculator();         int a = 1;         int b = 2;         // Act         int result = calculator.Add(a, b);         // Assert         Assert.AreEqual(3, result);     } }     Test boundary conditions   Make sure to test boundary conditions, such a...




















Post a Comment









Read more




























What to choose between .NET Core and .NET?




























 .NET Framework is a better choice if you: you don't have enough time time to learn new technology. Need a stable environment to work in. Have nearer release schedules. you are already working on an existing app and extending its functionality. If already have an existing team with .NET expertise and building production-ready software. Do not want to deal with continuous upgrades and changes. Building Windows client applications using Windows Forms or WPF .NET Core is a better choice if you: IF you wanted to deploy your app on Windows, Linux, and Mac operating systems. Are not afraid of learning new things. Are not afraid of breaking and fixing things since .NET Core is not fully matured yet. When you are learning .NET. work on open source.




















Post a Comment









Read more