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 See Logs Of Dropped Tables From The Database in MS SQL.




























  Here, I will explain you how you can see logs of users.     Step 1 : First, create a new database with name "test".  Step 2 : Create a new table.          Step 3 : Now, go and drop the table by running the following command.         Step 4 : Now, select your database under Object Explorer and go to Reports >> Standard Reports >> Schema Changes History.         Step 5 : You will then see the schema change history. The report will show you who has dropped this table.            Finally, you can locate the user activity with the help of log.     




















Post a Comment









Read more




























How To Deploy .net Core Application On Linux




























Here, I can explain steps to deploy .net core application on linux machine. Step 1 - Publish your .net Core application: First, create a .net core application on VS; you can make an MVC project or Web API project and if you already have an existing project, then open it. Right Click on your project Click on publish Now create a new publish profile, and browse the folder where you want to publish your project dll Click on publish so it will create your dll in the folder Step 2 - Install required .net Module on Linux: Now we have our web application dll and now we need to host it on the Linux environment. First, we need to understand how the deployment works in Linux. .Net applications run on Kestrel servers and we run Apache or Nginx server in Linux environments, which acts as a proxy server and handles the traffic from outside the machine and redirects it to the Kestrel server so we will have Apache or Nginx server as the middle layer. In this article, we will use Apache as a proxy ser




















Post a Comment









Read more




























List Of Commonly Used Angular Commands




























1) To get the npm version,    npm -v             2) To get the node version,         node -v            3) To get the Angular version,         ng v             4) To get the Jasmine version,         jasmine -v             5) To get the Karma version,         karma --version             6) To install Angular CLI,         npm install @angular/cli -g   npm install @angular/cli               7) To install the next version of Angular CLI, v        npm install @angular/cli@next             8) To get help in the terminal,         ng help            9) To create a new project in Angular,         ng new project-name             10) To skip external dependencies while creating a new project,         ng new project-name --skip-install             11) To run the Angular project,         ng serve (or) npm start (or) ng serve --force             12) Dry Run,         ng new project-name --dry-run            13) To create a new component in the Angular Project,         ng generate component component-




















Post a Comment









Read more