What could be causing the "10 $digest error" to appear in my code?

Question

What could be causing the "10 $digest error" to appear in my code?

My goal was to create a basic app that could detect the size of the browser and display it. But, I encountered an error message saying "Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!"

app.controller('AppCtrl',function($window,$scope){
$scope.windowHeight;
$scope.windowWidth;

$scope.getWindowSize = function(){
    return {
        h:$window.innerHeight,
        w:$window.innerWidth
    };
};

$scope.$watch($scope.getWindowSize,function (newValue,oldValue){
    $scope.windowHeight = newValue.h;
    $scope.windowWidth = newValue.w;
});
});

Here is my HTML Template:

<!DOCTYPE html> 
<html ng-app="size-util">
   <head>
      <title></title>
      <script src="angular.js"></script> <script src="colorBorder.js"></script> 
   </head>
   <body ng-controller="AppCtrl">
      <div color-border='blue'>Welcome!</div>
      {{windowHeight}} {{windowWidth}} 
   </body>
</html>

The structure above showcases my code but it seems like there's an issue. Was my approach with the $watch method incorrect? I can't seem to figure out where the problem lies. Any suggestions?

javascript angularjs

Answer 1

Answer №1

If you want to watch a function for its return value, keep in mind that using $watch may not work as expected if the function always returns a new object. This is because the comparison between old and new objects will always result in oldObj !== newObj, causing another digest cycle even when values don't stabilize.

To avoid this issue, only return a new object when any of its values actually change:

var windowSize = {};
function getSize(){
  var h = $window.innerHeight,
      w = $window.innerWidth;

  if (windowSize.h !== h || windowSize.w !== w){
    windowSize = {h: h, w: w};
  }

  return windowSize;
}

$scope.$watch(getSize, function(newVal){...})

It's important to note that this approach does not trigger a digest on its own, so simply resizing the window won't reflect any changes until something else triggers a digest cycle.

Answer 2

If you want to watch a function for its return value, keep in mind that using $watch may not work as expected if the function always returns a new object. This is because the comparison between old and new objects will always result in oldObj !== newObj, causing another digest cycle even when values don't stabilize.

To avoid this issue, only return a new object when any of its values actually change:

var windowSize = {};
function getSize(){
  var h = $window.innerHeight,
      w = $window.innerWidth;

  if (windowSize.h !== h || windowSize.w !== w){
    windowSize = {h: h, w: w};
  }

  return windowSize;
}

$scope.$watch(getSize, function(newVal){...})

It's important to note that this approach does not trigger a digest on its own, so simply resizing the window won't reflect any changes until something else triggers a digest cycle.

Answer 3

Answer №2

function calculateWindowSize() {
    return {
        height: window.innerHeight,
        width: window.innerWidth
    };
}

This function will always return a new object with the current window size.

$scope.$watch(calculateWindowSize, function(newValue, oldValue) {
    $scope.windowHeight = newValue.height;
    $scope.windowWidth = newValue.width;
});

In this context, newValue and oldValue refer to two distinct objects.

To enable deep watching, set the third argument of the $watch function to true.

$scope.$watch(watchFunction, listenerFunction, true)

Answer 4

function calculateWindowSize() {
    return {
        height: window.innerHeight,
        width: window.innerWidth
    };
}

This function will always return a new object with the current window size.

$scope.$watch(calculateWindowSize, function(newValue, oldValue) {
    $scope.windowHeight = newValue.height;
    $scope.windowWidth = newValue.width;
});

In this context, newValue and oldValue refer to two distinct objects.

To enable deep watching, set the third argument of the $watch function to true.

$scope.$watch(watchFunction, listenerFunction, true)

Answer 5

Answer №3

It seems unlikely that you will be able to get it working smoothly (even if you manage to, the efficiency may be lacking).

The $scope.watch() function is used to monitor a variable's changes

. In this scenario, you are observing a function that remains constant and does not change. I recommend using a directive instead if you wish to track the window.resize event:

Answer 6

It seems unlikely that you will be able to get it working smoothly (even if you manage to, the efficiency may be lacking).

The $scope.watch() function is used to monitor a variable's changes

. In this scenario, you are observing a function that remains constant and does not change. I recommend using a directive instead if you wish to track the window.resize event:

What could be causing the "10 $digest error" to appear in my code?

Answer №1

Answer №2

Answer №3

Similar questions

jQuery Multi-select - Event Handler for Selecting All Items

Prevent form submission using jQuery based on ajax response, or allow it to submit otherwise

Can you explain the significance of 1x, 3x, etc in the Karma code coverage report for Angular unit testing?

Having trouble rendering JSON data on a FlatList component in React Native

Optimizing performance in Angular 1.5 by utilizing $interval and enabling the Garbage Collector to efficiently handle memory management

How can I extract an array of objects from an array of arrays containing objects?

Leveraging React Native to position a view absolutely in the center of the screen without obstructing any other components

Is it advisable to perform unit testing on my JavaScript code?

Incorporating Entrance Animations for Individual Elements within ngView Using AngularJS

jQuery script located on local server fails to function

Guide on how to trigger a pop-up modal to open a new webpage by clicking on a hyperlink

Retrieve JSON data from a different controller or service method in AngularJS

Saving integer data retrieved from DynamoDB in a React Native application

Error found in Nuxt3 application when using locomotive scroll functionality

Tips for dynamically assigning unique IDs to HTML form elements created within a JavaScript loop

Modify the design of the button in the CSS code

How can I properly customize and expand upon a Material UI ListItem component?

Striped artifacts can be observed in the lights of A-Frame technology, with their appearance varying depending

Develop a monitor for an entity that has not been created

Tables inserted via ckeditor do not preserve the style attribute