Angular ui-router, routing problems with :id. $stateParams empty

Problem

in my routes(states) config I have:

state('users', {
            abstract:true,

            templateUrl: '/path/to/template.html',

            access: { isPrivate: 0 },
            resolve: {
           ...a resolve block..



    }).state('users.me',{
            url: '/users/:id/',
            controller: 'userCtrl',
            access: { isPrivate: 0 },
            views:{
                'userView':{
                    templateUrl:'/path/to/template.html'',
                    controller:'userCtrl',

                },
                'view1':{
                    templateUrl:'/path/to/template.html'',
                    controller:'anotherCtrl',

                },
                'view2':{
                    templateUrl:'/path/to/template.html'',
                    controller:'anotherCtrl',

                },
                'view3':{
                    templateUrl:'/path/to/template.html'',
                    controller:'anotherCtrl',

                },
                'view4':{
                    templateUrl:'/path/to/template.html',
                    controller:'anotherCtrl'
                }
            }

In the resolve for this view I have:

 user: function (Restangular, tokenService, $q,$stateParams) {
                    var token = tokenService.getAccessToken();
                    console.log('params',$stateParams) //logs an empty object
                    return Restangular.one('users',($stateParams.id || "me")).get({ header:header });
                }

but for some reason, even if change the url to /users/5/ the resolve functions (that should resolve the correct data for the user) get an empty $stateParams.id and auto resolves to the default 'me'.

What am I missing? I'll be glad for help with this!

Problem courtesy of: alonisser

Solution

the problem was the placement of the resolve in the abstract state. moving it one level down works. seems that the abstract state resolve is called only when moveing in or out the abstract state. but moving between /users/4/ and /users/5 doesn't move between states.

this is just my guess. but it works (for now)

UI-router is great but I would really wish the docs were clearer.

Solution courtesy of: alonisser

Discussion

Alternative would be the following

.state('user.update-user',{
  url: '/update-user/:userId',
  templateUrl: '/views/update-user.html'
}

And the links would look something like this

 <a ui-sref='user.update-user({userId: use._id})'><i class="fa fa-pencil-square-o"></i></a>
Discussion courtesy of: Rick

Try replacing your code section:

}).state('users.me',{
        url: '/users/:id/',

with:

}).state('users.me',{
        url: '^/users/:id',

I use this in a ton of places and it works perfectly.

Discussion courtesy of: Phil Thomas

This recipe can be found in it's original form on Stack Over Flow.