Angular UI router - access state params in parent

Question

I have an Angular App using the great ui-router.

My setup looks like:

.config( function ($stateProvider, $urlRouterProvider) {

    $stateProvider

    // PROJECT DETAIL
    .state('project', {
        url: '/project/:projectId/',
        resolve: {
            /* some base api calls */
        },
        views: {
            'task-list': {
                templateUrl: 'partials/task_list.tmpl.html',
                controller: 'TaskListCtrl',
                resolve: {
                    tasks: function ($stateParams, ConcernService) {
                        return ConcernService.get('project-tasks/', $stateParams.projectId);
                    },
                }
            },
            'concern-instance': {
                /* some resolved variables */
            }
        }
    })
    .state('project.task', {
        url: 'task/:taskId/',
        views: {
            'concern-instance@': {
                /* some different resolved variables */
            },
        }
    })

This all works like butter. However in my task_list template when in state project.task, I want to be able to access the taskId param so I can highlight active nav links, even when the url is #/project/123/task/456/ the taskId is empty. I understand that this is because templates only have access to params declared for that state. So if I want to get the taskId in the project.task state, how should I do it? Do I need to re-declare the task-list in project.task?

Solution 1

In the UI-Router documentation here they explain that

"the $stateParams object will only contain the params that were registered with that state."

You can only have access to parent state parameters in a child state using the resolve property on the parent.

Put this on your 'project' state (parent):

...    
resolve: {
    // Expose projectId parameter to child states
    projectId: ['$stateParams', function ($stateParams) {
        return $stateParams.projectId;
    }]
},

Then inside your controller for your state 'project.task' (child) you should have access to both

$stateParams.projectId

and

$stateParams.taskId

Solution 2

I have noticed $state.params contains the child state params. Can't seem to find any documentation on it. It just works

Comments

[aet]

It's an annoying problem. You could remove the url for the parent state, and declare full urls for the child states, if you don't need the state param in the parent controller/template. If you do, then I guess you could just put the state param in the scope in a variable to be accessed by the children.

[Manny]

We're running into the same problem as you describe. You probably already know by now, but you can in fact get to all of your parameters via $state.params. But, if you're like me, it won't sit well with you to get your parameters in different ways throughout your controllers. The closest thing I've found so far in the documentation describes the opposite issue of a parent state's param not available to the child state. Did you ever figure this out (via $stateParams)?

[dwp4ge]

@DarwinTech if this works please mark as the answer. Thx

[Kabachok]

You are right! My life has been saved!:) Thank you!