16

I just want to know how to use $digest. Inside a controller the following code works fine and it updates the DOM after 3 seconds:

setTimeout(function(){
    $scope.$apply(function(){
        $scope.name = 'Alice';
    });
}, 3000);

However by using

setTimeout(function(){
        $scope.$digest(function(){
        $scope.name = 'Alice';
        });
    }, 3000);

nothing happens...

I thought that they do the same thing. Am I wrong?

Matthias
  • 13,607
  • 9
  • 44
  • 60
Unknown developer
  • 5,414
  • 13
  • 52
  • 100
  • 1
    there are whole articles written about what `$apply` and `$digest` do. In the meantime, try [`$timeout`](https://docs.angularjs.org/api/ng/service/$timeout), which does a timeout and an implicit $apply. – Jorg Mar 06 '16 at 11:30
  • this is so good: http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/ – Abhi Sep 01 '17 at 07:16

4 Answers4

60

$apply() and $digest() have some similarities and differences. They are similar in that they both check what's changed and update the UI and fire any watchers.

One difference between the two is how they are called. $digest() gets called without any arguments. $apply() takes a function that it will execute before doing any updates.

The other difference is what they affect. $digest() will update the current scope and any child scopes. $apply() will update every scope. So most of the time $digest() will be what you want and more efficient.

The final difference which explains why $apply() takes a function is how they handle exceptions in watchers. $apply() will pass the exceptions to $exceptionHandler (uses try-catch block internally), while $digest() will require you handle the exceptions yourself.

candidJ
  • 4,289
  • 1
  • 22
  • 32
Luis Perez
  • 27,650
  • 10
  • 79
  • 80
  • 1
    can you please explain what you mean by `$apply() will update every scope` – Abhi Jul 20 '17 at 05:08
  • 1
    calling `$apply()` on any scope calls `$rootScope.$digest()`, as all `scopes` are children of `$rootScope`, all watchers calls https://groups.google.com/forum/#!topic/angular/e0yYSbptTbw – Sergey Sahakyan Aug 24 '17 at 19:04
  • 3
    "So most of the time $digest() will be what you want and more efficient" - How does this go together with what the [documentation](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply) states: "Usually, you don't call $digest() directly in controllers or in directives. Instead, you should call $apply() (typically from within a directive), which will force a $digest()" ? – BornToCode Dec 28 '17 at 10:13
  • 1
    @BornToCode if you read the document carefully, in the pseudo code of `$apply`, `$digest` is called on `$root` scope which means $apply fires watches from root scope. So his statement on `$digest` is true. – Thaadikkaaran Oct 05 '18 at 15:34
3

I think you must go through documents $apply

$apply() is used to execute an expression in angular from outside of the angular framework

Usually, you don't call $digest() directly in controllers or in directives. Instead, you should call $apply() (typically from within a directive), which will force a $digest().

Also as suggest by Jorg, use $timeout

Shankar Gurav
  • 1,057
  • 9
  • 17
  • 3
    [$evalAsync](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$evalAsync) is also a valid option since it triggers a $digest cycle. – Cosmin Ababei Mar 06 '16 at 11:41
3

In angularjs $scope object is having different functions like $watch(), $digest() and $apply() and we will call these functions as central functions.

The angularjs central functions $watch(), $digest() and $apply are used to bind data to variables in view and observe changes happening in variables.

Generally in angularjs we use $scope object to bind data to variables and use that variables values wherever we required in application. In angularjs whatever the variables we assigned with $scope object will be added to watch list by using $scope.$watch() function.

In angularjs once variables added to watch list $scope.digest() function will iterates through the watch list variables and check if any changes made for that variables or not. In case if any changes found for that watch list variables immediately corresponding event listener function will call and update respective variable values with new value in view of application.

The $scope.$apply() function in angularjs is used whenever we want to integrate any other code with angularjs. Generally the $scope.$apply() function will execute custom code and then it will call $scope.$digest() function forcefully to check all watch list variables and update variable values in view if any changes found for watch list variables.

In most of the time angularjs will use $scope.watch() and $scope.digest() functions to check and update values based on the changes in variable values.

Pritam Banerjee
  • 17,953
  • 10
  • 93
  • 108
Bhupendra Gupta
  • 101
  • 1
  • 2
0

A better understanding of $watch, $apply, and $digest is provided in this article.

Simply,
$watch that is used to detect changes in the UI
$apply would tell the $digest loop what changes should be applied
$digest loop would run and will ask every $watch for changes, the DOMs would change accordingly for what has what has been applied

You should call $apply only.

Bilal Abdulkany
  • 31
  • 6