Scaffold your ideas into application
Get your free alpha access now.
Only 445 left, Hurry!
19 Dec 2016

AngularJs: Apply vs Digest

img

If you have been coding or fiddling with angular for some time, the chances are good that you have come across the terms digest and apply. As we had discussed in earlier article that digest is the heart of scope and binding.

$digest

In most of the non trivial cases you may need to mix angular and some other library or even pure javascript, which means that there is a chance that angular variables may get updated outside angular context and angular may not know about it to update the view. You may think that it happens only rarely when you are trying to do some thing out of ordinary, however it happens quite often, lets look at some of the example where angular would miss an update.


angular.controller('myController',function($scope){
$scope.name = 'xyz';

$scope.doSomething = function(){
    setTimeout(function(){
        $scope.name = 'abc';
    },1000);
}

});

This seems like a innocent looking code but since we are modifying the scope in a setTimeout function, angular would not know when the variable is updated and would not update the view. To fix this issue, we would need to explicitly tell angular to run the digest cycle again.


angular.controller('myController',function($scope){
$scope.name = 'xyz';

$scope.doSomething = function(){
    setTimeout(function(){
        $scope.name = 'abc';
        // Run the digest again 
        $scope.$digest();
    },1000);
}

});

Ideally you should use $timeout service from angular for these kind of usecases.

Using digest should fix the issue of missed update, but angular documentation recommens using apply instead of digest, so what is the difference between $digest and $apply.

$apply

Essentially if we call apply, it would trigger a rootScope.$digest() which in turn would run the digest for all child scopes. However apply runs exception handler wrappers around digest calls which is why it recommends using apply instead of digest however apply calls are usually much more expensive than digest on scope.

Lets use an example to understand the difference between the two.

<body ng-app="test">
<div ng-controller="controllerOne" id="one">
  Hello {{name}} 

</div>

<div ng-controller="controllerTwo" id="two">
  Hello {{name}}

</div>

   <button id="btn1">Digest</button>

   <button id="btn2">Apply</button>
</body>
var app = angular.module('test',[]);

app.controller('controllerOne',function($scope){
  $scope.name = 'Java';

});

app.controller('controllerTwo',function($scope){
  $scope.name = 'ASP';
});

$('#btn1').click(function(){

  $('#one').scope().name = 'Scala';
  $('#two').scope().name = '.NET';
  $('#one').scope().$digest();

});

$('#btn2').click(function(){

  $('#one').scope().name = 'Scala';
  $('#two').scope().name = '.NET';
  $('#one').scope().$apply();
}); 

You can see the running code here

We are using two controllers and externally modifying the scope variables and triggering these two method. In case of digest only the dom for which we called digest is updated, while in case of apply both the dom are updated.

Digest method has significant performance advantage but it comes at the cost of missing the update to parent scope, so if you know what you are doing, go ahead and use digest intead of apply, otherwise stick to apply as safer option.


Stats:
364 views
Scaffold your ideas into application
Get your free alpha access now.
Only 445 left, Hurry!

Angular Directives Demystified

Directives are the most misunderstood aspect of angular JS. Learn how directives can help you keep your code clean.

Third wave of digital transformation

Third wave of digital transformation

Angularjs Tutorial: Understanding Scope

Scopes are one of the most important and rarely understood concept in angular, in this part we explore how scope works in angularjs.

Comments:

Leave your comments