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 Implement NLog With WebAPI In Asp.Net(C#).




























 What is NLog?   NLog is a flexible and free logging platform for various .NET platforms, including .NET standard. NLog is easy to apply and it includes several targets (database, file, event viewer).   Which platform support it?   .NET Framework 3.5, 4, 4.5, 4.6 & 4.7  .NET Framework 4 client profile  Xamarin Android  Xamarin iOS  Windows Phone 8  Silver light 4 and 5  Mono 4  ASP.NET 4 (NLog.Web package)  ASP.NET Core (NLog.Web.AspNetCore package)  .NET Core (NLog.Extensions.Logging package)  .NET Standard 1.x - NLog 4.5  .NET Standard 2.x - NLog 4.5  UWP - NLog 4.5    There are several log levels.    Fatal : Something terrible occurred; the application is going down   Error : Something fizzled; the application might possibly proceed  Warn : Something surprising; the application will proceed   Info : Normal conduct like mail sent, client refreshed profile and so on.   Debug : For troubleshooting; the executed question, the client confirmed, ...




















1 comment









Read more




























Generating serial numbers and keys in Asp.net(C#).




























 here we are using GUID for generate serial numbers and GUID is always unique.   Example format: XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX.   Guid SerialKeyGuid = Guid.NewGuid(); string AccessKey = SerialKeyGuid.ToString("N"); string AccessKeyLength = AccessKey.Substring(0, 28).ToUpper(); char[] serialArray = AccessKeyLength.ToCharArray(); string SerialNumber = ""; int P = 0; for (int B = 0; B < 28; B++) {                 for (P = B; P < 4 + B; P++)                 {                     SerialNumber += serialArray[P];                 }                 if (P == 28)                 {                     break;                 }         ...




















Post a Comment









Read more




























Extracting Values from PDFs in .NET Core 8 without ASP.NET




























Extracting data from PDF files is a common necessity for various tasks such as data analysis, content indexing, and information retrieval. While ASP.NET Core 8 offers robust tools for PDF manipulation, there are instances where developers may prefer alternatives for flexibility or specific project requirements. In this article, we'll explore how to extract values from PDF files within the .NET Core 8 ecosystem without relying on ASP.NET, using the PdfSharpCore library. We'll provide a step-by-step guide along with examples in C# to demonstrate how to accomplish this task effectively. Understanding PdfSharpCore: PdfSharpCore is a popular .NET library for PDF document manipulation. It provides functionalities to create, modify, and extract content from PDF files. In this guide, we'll focus on utilizing PdfSharpCore to extract text from PDF documents. Installing PdfSharpCore: Before we can start using PdfSharpCore in our .NET Core application, we need to install the PdfSharpCo...




















Post a Comment









Read more