Inheriting parameters with nested views in Angular UI-router?

Question

I am attempting to set up nested views loading in the parent views via state children but I'm not sure if I'm going about this the correct way.

So far, I have:

$stateProvider
.state('splash', {
    url: '/splash',
    templateUrl: 'system/templates/splash.html',
    controller: ""      
}).state('home', {
    url: '/',
    templateUrl: 'system/templates/home.html',
    controller: ""      
}).state('user', {
    url: '/user/:user?',
    templateUrl: 'system/templates/user.html',
    controller: "userController"
}).state('user.data', {
    views: {
        "@vdata" : {
            templateUrl: 'system/templates/user.html',
            controller: "userController"                
        }
    }
})

The "user" parent state recieves :user? the correct way, however when I try to navigate via $state.transitionTo();, I get the response of

Param values not valid for state 'user.data'. I have an unnamed view with the pattern

<div ui-view></div>

set as the parent. Then nested in the user template, I have a ui-view called "vdata". According to the documentation, if I target @vdata, the pages requested should be loading there.

How can I get the nested view to inherit the parameter from the parent view?

Answer 1

Use resolve and inject user on controller. The resolved references are shared betwen parent child states.

$stateProvider
.state('splash', {
    url: '/splash',
    templateUrl: 'system/templates/splash.html',
    controller: ""      
}).state('home', {
    url: '/',
    templateUrl: 'system/templates/home.html',
    controller: ""      
}).state('user', {
    url: '/user/:user?',
    templateUrl: 'system/templates/user.html',
    controller: "userController",
    resolve:{
        user: function($stateparams){
          return $stateParms.user;
        }
    }
 ....

On usercontroller inject user