The $digest method is refreshing the main $rootScope parent

Question

The $digest method is refreshing the main $rootScope parent

I'm having trouble grasping the concept of how $digest functions. I came across a response on Angular $scope.$digest vs $scope.$apply that explains it as follows:

" $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 "

However, in my plnkr example, when I execute

$rootScope.company = "Google";

and then call $digest() on the second controller, the change is reflected in the parent scope as well. Could this be due to an error on my part?

Plnkr : http://plnkr.co/edit/LTBWTWf7hxlfc5niXsGN?p=preview

javascript angularjs

Answer 1

Answer №1

Upon reviewing your code, I must say it caught my attention! One suggestion I have is to experiment with the timeout values. For instance, I adjusted the timeout value of the second controller to 1000 ms and discovered that the two 'Google' companies were now the second and third ones.

In addition, I observed that in the third controller, you encapsulate the initialization within an $apply, transforming the code as follows:

app.controller('ThirdCtrl', function($scope, $rootScope) {
 $scope.name = 'Third';

  setTimeout(function() {
      $scope.name = "I'm Third";
     $rootScope.company = "Amazon";
     $scope.$digest();
  },500);
});

This modification effectively resolved the issue for me because the $apply in the third controller was updating $rootScope correctly! :D

However, I would recommend against using $scope instead of $rootScope for this solution. Using $scope may lead to unintended updates and potentially render your final application unstable.

Answer 2

Upon reviewing your code, I must say it caught my attention! One suggestion I have is to experiment with the timeout values. For instance, I adjusted the timeout value of the second controller to 1000 ms and discovered that the two 'Google' companies were now the second and third ones.

In addition, I observed that in the third controller, you encapsulate the initialization within an $apply, transforming the code as follows:

app.controller('ThirdCtrl', function($scope, $rootScope) {
 $scope.name = 'Third';

  setTimeout(function() {
      $scope.name = "I'm Third";
     $rootScope.company = "Amazon";
     $scope.$digest();
  },500);
});

This modification effectively resolved the issue for me because the $apply in the third controller was updating $rootScope correctly! :D

However, I would recommend against using $scope instead of $rootScope for this solution. Using $scope may lead to unintended updates and potentially render your final application unstable.

Answer 3

Answer №2

$apply :

In charge of triggering the execution of all watchers within the application's scopes by calling $digest on rootScope ($rootScope.$digest()). This essentially initiates a complete life cycle of the application every time $apply() is invoked.

$digest :

AngularJS operates in cycles known as $digest, where changes between models and views are evaluated to ensure that the UI and Model are synchronized. The $digest process is responsible for updating the UI accordingly.

It should be noted that invoking $apply triggers $digest on rootScope, causing a reevaluation of all watchers across all scopes. For applications with large scope hierarchies, this may result in a performance impact.

Answer 4

$apply :

In charge of triggering the execution of all watchers within the application's scopes by calling $digest on rootScope ($rootScope.$digest()). This essentially initiates a complete life cycle of the application every time $apply() is invoked.

$digest :

AngularJS operates in cycles known as $digest, where changes between models and views are evaluated to ensure that the UI and Model are synchronized. The $digest process is responsible for updating the UI accordingly.

It should be noted that invoking $apply triggers $digest on rootScope, causing a reevaluation of all watchers across all scopes. For applications with large scope hierarchies, this may result in a performance impact.

The $digest method is refreshing the main $rootScope parent

Answer №1

Answer №2

Similar questions

JavaScript is experiencing an error where it cannot define a function, rendering it unable to generate a JSON object due to its inability to recognize that the

Ways to refresh a page after clicking a button inside the modal box

The console.log() displays the dictionary correctly, but trying to access it with a key results in it being undefined

Sending data from local storage to ajax call

How can we determine in JavaScript when AngularJS has completed compiling its view?

A basic structure for a JSON array

Tips for combining values with Reactive Forms

Angular grid with a numeric textbox designed for Kendo

Angular - when removing items from ngRepeat, the remaining elements do not transition smoothly; instead, they abruptly snap or jump into position

Vue: Simple ways to retrieve state data in MutationAction

Innovative react route

Different approach to iterating through elements

Developing Java-based Ajax scripts

Tips for sending and accessing multiple parameters in a URL for Node.js/Express GET routes

Sporadic success with Ajax operations

Issue with toggling options in q-option-group (Vue3/Quasar) when using @update:model-value

Webpack and Keycloak Integration: Content blocked because of MIME type ("text/html")

Utilize mapping function to merge arrays

Flask Server produces a response with a considerable delay when accessed through AJAX

What are some other options besides object-fit?