$q defer and promises and how to use them to load the data for a controller before the view is rendered

Question

This has been the most relevant thing I found: https://stackoverflow.com/a/11972028/110233

It seems to work fine when I only want to return one thing, but I'm unsure on how to return multiple things when the other things depend on the first thing.

Since that's kind of obtuse, here's a small example on what I'm currently doing:

window.EventRosterCtrl = ($scope, subevent) ->
    $scope.subevent = subevent

EventRosterCtrl.resolve = 
    subevent: (SubEvent, $route) ->
        deferred = $q.defer()

        SubEvent.get {subevent_id: $route.current.pathParams.subevent_id}, (subevent) ->
            deferred.resolve subevent

        return deferred.promise

And here's an example of what I would want to do:

window.EventRosterCtrl = ($scope, subevent, addresses) ->
    $scope.subevent = subevent
    $scope.addresses = addresses

EventRosterCtrl.resolve = 
    subevent: (SubEvent, $route) ->
        deferred = $q.defer()

        SubEvent.get {subevent_id: $route.current.pathParams.subevent_id}, (subevent) ->
            deferred.resolve subevent

        return deferred.promise

    addresses: (User) ->
        deferred = $q.defer()

        # how do you get subevent called first and how would you access it here?
        for participant in subevent.participants
            User.get {user_id: participant.user}, (user) ->
                addresses[participant._id] = user.address

        deferred.resolve addresses

        return deferred.promise

score 4 · Answer 1 · answered Sep 07 '12 at 05:47

4

you need to chain promisses using the .then()

  var promise = firstOperation();
  promise = promise.then(function(value) {
    // do some more work
    return value; // it can be another promise
  });
  return promise; // this one will be resolved when both steps are resolved

answered Sep 07 '12 at 05:47

Misko Hevery

47,936
11
40
36

@Justen, I don't know Coffescript, however the last row of your example can be something like `return deferred.promise.then(function(value) { return value; })`, i.e. `promise.then()` returns a new promise. – Marcello Nuccio Sep 07 '12 at 10:49
That won't work. The resolve is an object mapping a key to a function, the deferred in subevent wouldn't be accessible in another key map – Justen Sep 07 '12 at 11:11

score 2 · Accepted Answer · answered Nov 15 '12 at 23:38

Ok, so a you can't control it that way, but a work around that comes to mind (when one resolution is dependent on another finishing first) is just put everything in one object and resolve that. What ended up working best for me was making a service, but to follow my original example:

window.EventRosterCtrl = ($scope, info) ->
    $scope.subevent = info.subevent
    $scope.addresses = info.addresses

EventRosterCtrl.resolve = 
    info: (SubEvent, User, $route, $q) ->
        deferred = $q.defer()
        resolvedInfo = {}

        SubEvent.get {subevent_id: $route.current.pathParams.subevent_id}, (subevent) ->
            resolvedInfo.subevent = subevent

            for participant in subevent.participants
                User.get {user_id: participant.user}, (user) ->
                    addresses[participant._id] = user.address

                    if addresses.length is subevent.participants.length
                        resolvedInfo.addresses = addresses
                        deferred.resolve resolvedInfo

        return deferred.promise

score -1 · Answer 3 · answered Sep 10 '12 at 18:35

The EventRosterCtrl is only initialized when the subevent is ready, so the following should work:

window.EventRosterCtrl = ($scope, subevent) ->
    $scope.subevent = subevent

    for participant in subevent.participants
        User.get {user_id: participant.user}, (user) ->
            $scope.addresses[participant._id] = user.address

EventRosterCtrl.resolve = 
    subevent: (SubEvent, $route) ->
        deferred = $q.defer()

        SubEvent.get {subevent_id: $route.current.pathParams.subevent_id}, (subevent) ->
            deferred.resolve subevent

        return deferred.promise

This will still have flickering because `$scope.addresses` resolves after the controller and page rendering. — Justen, Nov 15 '12 at 22:41

$q defer and promises and how to use them to load the data for a controller before the view is rendered

3 Answers3

Linked