logo
down
shadow

Angular error: 10 $digest() iterations reached


Angular error: 10 $digest() iterations reached

By : Madan Pandey
Date : November 22 2020, 02:59 PM
should help you out I totally agree with the given answer of Daniel.
Just for a better understanding I would like to show here that a simple solution could be reached if one can do the ordering before any bindings and watchers are active.
code :
// Code goes here

var app = angular.module('test', []);

app.controller('TestCtrl', ['$scope', function($scope) {
  var events = [{
      startDate: new Date('Tue Nov 24 2015 03:05:00'),
      name: '111'
    }, 
    {
      startDate: new Date('Tue Nov 24 2015 03:05:00'),
      name: '222'
    },
    {
      startDate: new Date('Tue Nov 24 2015 04:05:00'),
      name: '333'
    },
    {
      startDate: new Date('Tue Nov 24 2015 04:05:00'),
      name: '444'
    }
  ];

  $scope.orderedEvents = getEvents(events,'startDate');
  
  function getEvents (collection,property) {
    var result = {};
    angular.forEach(collection, function(item) {
      var prop = item[property];

      if (!result[prop]) {
        result[prop] = [];
      }

      result[prop].push(item);
    });

    return result;
    
  }
}]);
<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@*" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="test" ng-controller="TestCtrl">
  <ul ng-repeat="(startDate, eventsList) in orderedEvents">
    <li>{{eventsList[0].startDate}}</li>
    <li ng-repeat="event in eventsList">{{event.name}}</li>
  </ul>
  
</body>

</html>


Share : facebook icon twitter icon
Angular JS: IE Error: 10 $digest() iterations reached. Aborting

Angular JS: IE Error: 10 $digest() iterations reached. Aborting


By : TazmamzaT
Date : March 29 2020, 07:55 AM
may help you . I had the same issue with error which looked the same. Chrome\FF worked fine, but IE failed. I've clicked on some links in my app and sometimes got this error and sometimes not.
1) In my view I had few links which looked like this:
code :
<a href="#" ng-click="addIP(ip)">Add some IP</a>
$scope.IpRanges.push(ip);
<a href="" ng-click="addCurrentIP()">Add as allowed IP</a>
Error: 10 $digest() iterations reached! Aborting! during walking through slices of arrays using Angular.js

Error: 10 $digest() iterations reached! Aborting! during walking through slices of arrays using Angular.js


By : Pedro Klepa
Date : March 29 2020, 07:55 AM
it helps some times Please take a look at this stackoverfolow thread, you should make your filter to return the same exact objects since if the object get changed during the repeater, it will cause the error in $digest.
code :
.filter("group", function () {
    return _.memoize(function (items, count) {
        var out = [],
            temp = [];
        for (var i = 0; i < items.length; i++) {
            temp.push(items[i]);
            if (temp.length == count) {
                out.push(temp);
                temp = [];
            }
        }
        if (temp.length) out.push(temp);
        return out;
    });
});
Angular - Error: 10 $digest() iterations reached. Aborting

Angular - Error: 10 $digest() iterations reached. Aborting


By : user3386939
Date : March 29 2020, 07:55 AM
will be helpful for those in need Your binding being random, it will be different every time Angular will execute the watcher of this binding.
However, Angular only stops a digest cycle when it reaches a stable state where all the watchers return the same value twice in a row, which never happens with yours.
code :
$scope.randomPicture = generateRandomPicture();
<img ng-src="{{randomPicture}}">
// Generate a new random picture every 3 seconds
$interval(function() {
  $scope.randomPicture = generateRandomPicture();
}, 3000);
<img ng-src="{{randomPicture($index)}}">
var rand1 = Math.round(Math.random()*10);
var rand2 = Math.round(Math.random()*10);

$scope.randomPicture = function(index) {
  var PATH = 'assets/images/';
  var image = (index+rand1*rand2)%13 + 1;
  var ext = '.jpg';
  var randomPic = PATH + image + ext;

  return randomPic;
};
<img ng-src="{{::randomPicture()}}">
angular.js:14700 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting

angular.js:14700 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting


By : Shivpal Singh Chouha
Date : March 29 2020, 07:55 AM
it fixes the issue If your getClockString method returns one string value then call it inside angular's $interval service. Update your template code to:
code :
<div class="bottom-right bottom-timer time botton10">
  <div class="work-clock" ng-init="workCntrl.getClockStringEverySecond(work)" 
     ng-bind="workCntrl.clockString">
  </div>
</div>
workCntrl.getClockStringEverySecond = function(work) {
    $interval(function () {
        workCntrl.clockString= workCntrl.getClockString(work);
    }, 1000);
}
Using angular directive causes error: 10 $digest() iterations reached. Aborting

Using angular directive causes error: 10 $digest() iterations reached. Aborting


By : Adam McLane
Date : March 29 2020, 07:55 AM
To fix this issue The issue is with the approach, how the data is passed to the Angular. Angular has awesome data binding and it checks if the model is changed and updates the UI. Once the UI is updated, it checks again for the next round of changes. If data is changed all the time, it can stuck in the loop.
In this particular case the Angular does not understand that the data is the same. It receives new array on every digest loop and assumes that the data is changed, updates UI and starts checking again.
Related Posts Related Posts :
  • I want to restrict HTML input autocomplete to 3 letter minimum
  • tinyMCE editor not updating on the fly
  • typescript kendo-ui call method from string
  • HttpCompileException was unhandled by user code (when i am adding c# code in script)
  • Send form data as array of objects to controller in asp.net mvc
  • Javascript, multi file modules and Require.Js
  • how to render a complete new template and leave the application template in ember
  • Hover unrelated divs
  • Permute string until it matches some input?
  • How to fire JQuery change event when input value changed programmatically?
  • AJAX: POST data to a different url
  • checkbox column in jquery datatable
  • Document.evaluate for documents without namespaceURI crashes Microsoft Edge
  • Bootstrap Menu with "More" option Responsive issue
  • Standard inputs not being added to Angularjs Form $Scope
  • Express promise throw error
  • onclick and get in jquery
  • How to get the country code from Google Places API
  • Passing parameters url in Select2
  • Is there any frame work for Marklogic to write javascript code?
  • How to implement a boostrap template over bootstrap-sass gem
  • Why fixed div comes out when horizontally scrolled?
  • How to limit scope of a function in javascript/ jquery
  • Overlapping legend d3.js
  • Apply transition to div
  • Javascript game help - counting with dice
  • How to hide a div from angular controller
  • Can Promise load multi urls in order?
  • How enable Hover event for bootstrap menus?
  • D3 scale.invert() isn't returning date for x
  • Parsing object to array using underscore js or lodash
  • ES6 with React and Browserify
  • AngularJS Factory return type undefined
  • javascript follow html input fields
  • how to declare a double array in javascript for this particular UI
  • Jquery : find length of mixed list
  • Returning the array before the function is complete & Angular JS
  • Javascript set value of class & hidden input in nested divs
  • Register custom filters with vue.js
  • Add class to input parent
  • Angular controller not talking to view
  • Trouble creating "if then" Javascript statement to change background color of page
  • Socket.IO - Middleware and scoping: how should I access global IO object from external middleware?
  • add class when input is valid in angularjs
  • Positioning multiple div elements
  • Checkbox clicking works, deselecting checkbox not working Javascript
  • Adding ajax jQuery File upload
  • Creating a dynamic array within a dynamic array in JQuery
  • Multiple File Upload actions for a single File Input PHP/JS
  • Want to move an added element to a different part of the DOM
  • Why can't I get Angularjs to work?
  • Minimizing browser window in Firefox & Chrome adds white space to right of page
  • I need to insert the date and time of employee stamp in and out into mysql database
  • Making css auto slider
  • why can't I defne the function first?
  • Pagination with MongoDB in Node.js (With Sorting)
  • How to repeat each() without page refresh
  • Position div at position of another div
  • Click handler is called multiple times in jQuery animate
  • How to multiply each element in an array with a different number (javascript)
  • shadow
    Privacy Policy - Terms - Contact Us © animezone.co