CODEWITHSUNDEEP
javascriptangularjsangular-promise
Patrick
Patrick

Reputation: 302

Value from Promise.all not always interpreted by Angular

I have a controller like so:

controller.things = ['a', 'b', 'c'];
controller.loading = true;
controller.responses = [];

controller.handlePromises = function(){
   var promises = [];

   for(promiseIndex = 0; promiseIndex < controller.things.length; promiseIndex++) {
        promises.push(controller.promise(things[promiseIndex]);
    }

    Promise.all(promises).then(function success(response){
        for(responseIndex = 0; responseIndex < response.length; responseIndex++){
           responses.push(response[responseIndex].data);
        }
        controller.loading = false;
    }
}

controller.promise = function(value){
   //Some $http request to Database;
}

controller.handlePromises();

The amount of stuff in controller.things depends on the user. Attached to this is a simple html page that does the following:

<div ng-if="!controller.loading">
    <div ng-repeat="response in controller.responses">
       {{response}}
    </div>
</div>

My problem is that there's a 50/50 chance for the content to become visible, the other times I can see in the debugger that the promises have been resolved and loading is set to false, but the ng-if keeps hiding the content. Even if the content is shown, there's a good chance that the ng-repeat says controller.responses is still empty.

How can I guarantee that the ng-if accepts controller.loading as false when the promises have been resolved, no matter how long it takes? Also, same question for the ng-repeat not seeing the values in controller.responses sometimes. I've considered a timeout, but that isn't the ideal solution as it can take anywhere between half a second to ten seconds.

Upvotes: 1

Views: 67

Answers (1)

Dieterg
Dieterg

Reputation: 16368

The problem is you're using Promise.all instead of $q. $q is a Promise library built by the Angular team that'll do the $digest cycle for you.

$q.all(promises).then(function success(response) {
  for (responseIndex = 0; responseIndex < response.length; responseIndex++) {
    responses.push(response[responseIndex].data);
  }
  controller.loading = false;
});

Read more about $q

Upvotes: 1

Related Questions