One of the challenges I'm facing is related to the structure of my controller:
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 is dependent on the user. Connected to this controller is a straightforward HTML page that performs the following actions:
<div ng-if="!controller.loading">
<div ng-repeat="response in controller.responses">
{{response}}
</div>
</div>
An issue I've encountered while working on this project is that there seems to be a 50/50 chance for the content to become visible. At times, even after loading is set to false and promises have been resolved, the content remains hidden. There are also instances where the ng-repeat does not recognize the values in controller.responses.
How can I ensure that the ng-if evaluates controller.loading as false only after all promises have been resolved, regardless of how long it takes? Similarly, how can I fix the problem with ng-repeat not displaying the values in controller.responses at times? I've thought about using a timeout, but it's not an ideal solution given the varying time it takes for the promises to resolve.