Get params from URL using $stateParams, UI-router. Undefined Value

Question

I am passing a value from one state to another using UI-Router. In my controller when the url is updated I am trying to get access to the second parameter of my url using $stateParams, but for some reason I can get access to the first parameter but the second one is UNDEFINED. This is my code:

state 1, URL:

 http://localhost:16009/#/5nqeAPqlv21/

state 2, URL:

 http://localhost:16009/#/5nqeAPqlv21/details/PP163Ku3dOR

candidateContoller.js:

//go to state 2 (same controller for parent and child views)
$state.go('index.details', { "submissionIdd": publicSubmissionId });

//when located in the new state and new url:
console.log($stateParams.submissionIdd); //shows undefined 
console.log($stateParams.token);  //shows 5nqeAPqlv21

App.js:

$stateProvider       
    .state('index',
        {
            url: '/:token/',
            views: {
                '': {
                    templateUrl: 'AngularJS/Templates/indexView.html',
                    controller: 'candidateController as candCtrl'
                },
                'sectioncandidate@index': {
                    templateUrl: (_isNotMobile) 
                      ? 'AngularJS/Templates/candidatesView.html' 
                      : 'AngularJS/Templates/candidatesMobileView.html'
                }
            }

        })          

     .state('index.details', {
         url: 'details/{submissionIdd}',
         views: {
             'sectioncandidate@index': {
                 templateUrl: (_isNotMobile) 
                   ? 'AngularJS/Templates/candidateView.html' 
                   : 'AngularJS/Templates/candidateMobileView.html'
             }
         }
     })

Answer 1

You do experience standard behavior of the UI-Router and Parent/Child state defintion:

• parent state declares $stateParams (as url: '/:token/') - so there is just one declared - a token
• child state gets all from parent(s), plus declares new parameter (as url: 'details/{submissionIdd}') - so it has both defined - token and submissionIdd,

So, while child has access to both params, parent state has just a token parameter

state 1 === PARENT, URL:

http://localhost:16009/#/5nqeAPqlv21/

here we will have submissionIdd undefined

state 2 === CHILD, URL:

http://localhost:16009/#/5nqeAPqlv21/details/PP163Ku3dOR

both are there submissionIdd=PP163Ku3dOR and token=5nqeAPqlv21

Extend - there is a working plunker

This states definition (in the plunker a bit adjusted)

.state('index',
    {
        url: '/:token/',
        views: {
            '': {
                templateUrl: 'indexView.html',
                controller: 'candidateController as candCtrl'
            },
            'sectioncandidate@index': {
                templateUrl: 'parent.html'
            }
        }

    })          

 .state('index.details', {
     url: 'details/{submissionIdd}',
     views: {
         'sectioncandidate@index': {
             templateUrl:'child.html',
         }
    })

will properly show state params for these links

href
<a href="#/5nqeAPqlv21/">
<a href="#/5nqeAPqlv21/details/PP163Ku3dOR">
<a href="#/5nqeAPqlv21/details/other">
ui-sref
<a ui-sref="index({token: '5nqeAPqlv21'})">
<a ui-sref="index.details({token: '5nqeAPqlv21', submissionIdd: 'another'})">

Check it here

Answer 2

You can prefer not to pass the the params in the URL unless there is an explicit requirement. I would prefer to use $stateParams in controller to fetch the data. For this you need to define the default params in the state to make it work.

 $stateProvider .state('index.details', {
         url: 'details',
          params: {
              submissionIdd: 'default',
          },
         views: {
             'sectioncandidate@index': {
                 templateUrl: (_isNotMobile) ? 'AngularJS/Templates/candidateView.html' : 'AngularJS/Templates/candidateMobileView.html' ,
             controller: function($stateParams){
                      console.log($stateParams.submissionIdd)
                   }
             }
         }
     })