Execute code after multiple resources have loaded in Angular

Question

In Angular, what is the best practice for triggering code after multiple models have been populated by resource services. Nest $scope.$watch?

Right now, I'm cheating and checking off values in an array, which doesn't feel very "angular."

$scope.loaded = [];
$scope.modelA = aResource.query({}, function() {$scope.loaded.push('a')});
$scope.modelB = bResource.query({}, function() {$scope.loaded.push('b')});

$scope.$watch(loaded.length, function(newValue) {
    if ($scope.loaded.indexOf(modelA) != -1 && $scope.loaded.indexOf(modelB) != -1) {
        console.log('done!'); 
    } 
});

https://groups.google.com/forum/?fromgroups=#!topic/angular/TizlifUL7FU

Community · Accepted Answer · 2017-05-23 11:50:08Z

2

If you are using Angular routing, this is normally accomplished with the resolve parameter of the when() method. See also Delaying AngularJS route change until model loaded to prevent flicker

If you don't want to delay your route change until the data is loaded, you can set up your own promises using $q. Use $q.all() to wait for all promises to resolve. See https://stackoverflow.com/a/15117739/215945 and https://stackoverflow.com/a/14545803/215945

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Mar 12, 2013 at 18:20

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Execute code after multiple resources have loaded in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related