UI-Router: Can I resolve a parent promise in a child state?

Question

I'm working on social application which has a cover in the profile page. Both "Edit" and "Visit" page has the cover, but different sub-sections. The problem is that some controllers shown in the cover strictly depends by the section you're currently visiting.

To solve this issue, I'm trying to return a promise in the resolve section of the parent state and then resolve the promise in the different child states.

.state('profile', {
    url: '/profile',
    controller: 'ProfileController',
    templateUrl: 'components/profile/profile.html',
    resolve: {
        actor: function(UserService){
            return UserService.getUser();
        },
        target: function($q){
            var deferred = $q.defer();
            return deferred.promise;
        }
    }
})
.state('profile.view', {
    url: '/:userId',
    templateUrl: 'components/profile/view.html',
    navbar: true,
    parent: 'profile',
    resolve: {
        /**
         *
         * @param target
         * @param {UserService} UserService
         */
        target: function(target, UserService){
            target.resolve(UserService.getActions('view'));
        }
    }
})

Unfortunately, there's something wrong in my logic because the return deferred.promise inside the profile state is blocking the application.

Could anyone help me to figure out what I'm doing wrong?

Best!

Answer 1

Return the promise to the resolver function

.state('profile.view', {
    url: '/:userId',
    templateUrl: 'components/profile/view.html',
    navbar: true,
    parent: 'profile',
    resolve: {
        /**
         *
         * @param target
         * @param {UserService} UserService
         */
        target: function(target, UserService){
            return UserService.getActions('view').$promise;
        }
    }
})

This answer assumes that UserService is a $resource query. Other APIs return promises differently but the principle is the same. Return the promise to the resolver function.