0

I got a problem Angular $http promise. It seems $http promise causes infinite loop with this error message. error : 10 $digest() iterations reached. Aborting!

I would like to hear some advice.

FYI, Eventually, Collection gets data from API and create userModel and send UserModel to Controller.

I would like to create functionality to organize Model such as ActiveRecord::Collection in Ruby on Rails

Thank you for reading

//*********************************
// Service from where $http is called
//**********************************

angular.module('dashboardApp').service('UserCollection', ['$http', '$q', function($http, $q){   

    function all(){
      var deferred = $q.defer();

      function successRequest(data) {
        deferred.resolve(data.data);
      };

      function failRequest() {
        deferred.reject([]);
      };

      $http({
        method: 'GET',
        url: 'http://localhost:3000/api/users'
      }).then(successRequest, failRequest);

      return deferred.promise;

    }
    return {
      all: all
    };
}]);

// ************************
// Contoller
// ************************

angular.module('dashboardApp')
  .controller('UserCtrl',['UserCollection', '$q', function(UserCollection, $q) {
   console.log("Inside User Controller");


   var user = this;
   var deferred = $q.defer();

   function successRequest(data){
     var array = deferred.resolve(data.data);
     return array;
   }

   function failRequest(){
     deferred.reject([]);
   }

   user.index = function(){

     UserCollection.all().then(successRequest, failRequest);

   };

  }]);

 //**************
 // View
 //**************
 <div ng-repeat="u in user.index()">
 </div>

4 Answers4

0

Fortunately you aren't the only one with this problem take a look at this: https://github.com/angular/angular.js/issues/705. This solved the issue for me, hope it works for you too. It's because your function in the ng-repeat keeps updating the values which results in an infinite digest loop.

Try saving the result of the promise to a variable where you can loop through.

Igor Minar: Your getter is not idempotent and changes the model (by generating a new array each time it is called).

Frank
  • 180
  • 10
  • Thank you for your comment. People (like me) think that it is simple as jquery ajax call but it is not. :( –  Apr 15 '16 at 03:35
0

You shouldn´t return array in successRequest(data) in your UserCtrl. Also make this user.index = function(){ UserCollection.all().then(successRequest, failRequest); };

not much sense. Instead you should do:

 UserCollection.all().then(successRequest, failRequest);

 function successRequest(data){
     var array = deferred.resolve(data.data);
     user.index = array;
 }

Also, but i am not sure what you want to achieve, but i guess you don´t need a deferred object in UserCtrl anymore. Or what are you doing with it?

kabaehr
  • 1,040
  • 11
  • 18
  • Thank you for answering. It does make sense. I completely solved the problem. I deleted an additional deferred object. –  Apr 15 '16 at 03:29
0

Simply put, this error occurs if ng-repeat gets always different value when the expression after in is evaluated (in your case user.index()).

You should save the result once like scope.values = ...array; and then use in template like u in values.

Ioan
  • 5,152
  • 3
  • 31
  • 50
  • Thank you for your comment. Now I understand and solved the problem! –  Apr 15 '16 at 03:36
  • I would love to up vote but I got this message "Thanks for the feedback! Once you earn a total of 15 reputation, your votes will change the publicly displayed post score." –  Apr 15 '16 at 21:33
0

The function used in ng-repeat is called each time the watch function is called during digest loop to get current model value for comparsion with the old one. In your implementation, user.index always returns a new object (a promise object returned by 'then' method), which makes Angular think the model to repeat is always dirty. This thead gives a more detailed explanation.

Community
  • 1
  • 1
Jaytalent
  • 41
  • 4