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'
             }
         }
     })

I tried that option, but dont know why i can still get the first param but not the second one. — D.B
– D.B, Commented Aug 29, 2016 at 10:31

Radim Köhler · Accepted Answer · 2016-08-29 10:47:51Z

2

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

edited Aug 29, 2016 at 10:47

answered Aug 29, 2016 at 10:33

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Pankaj Parkar Over a year ago

Since we can say $stateParams are local to state where as $state.params are global. They have dictionary of all the parameters, correct me if I'm wrong, Thanks :)

D.B Over a year ago

why if i execute directly in the browser (typing the whole url) localhost:16009/#/5nqeAPqlv21/details/PP163Ku3dOR ; my controller only print token (the first param). dont understand.

Radim Köhler Over a year ago

There is a link to plunker plnkr.co/edit/rJMPRbD5S1YYvSkJrhq4?p=preview it should show all that in action, hope it helps

Radim Köhler Over a year ago

I would put it this way: As @PankajParkar has stated - $state.params gives access to all params.. even to child ones. BUT ... it is not easy to react to them. Because parent is initiated.. and is not changing - when child states are changed, there is no information that $state.params.xyz is having different value. We would need to introduce the watch $scope.$watch("$state.params", function(params) {...}) and have to have assigned the $scope.$state = $state in parent... but that is a bit odd solution. If we have params on proper state.. any change will trigger its re-creation...

Radim Köhler Over a year ago

There is an adjusted plunker plnkr.co/edit/NgS4q9XCfbxt1xO5oDRe?p=preview (open the console and observe changes when navigating among children). It simply shows, that we can have access to all params, even in parent.. but it makes code really very complex, hard to read and very hard to maintain ... I'd say

|

ajaykumar · Accepted Answer · 2016-08-29 10:12:17Z

0

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)
                   }
             }
         }
     })

answered Aug 29, 2016 at 10:12

ajaykumar

6567 silver badges17 bronze badges

1 Comment

D.B Over a year ago

what if I dont go tho second state from a previous state, if not i type the full url localhost:16009/#/5nqeAPqlv21/details/PP163Ku3dOR. Actualy i need to get that param if the user refresh the page, so i am able to fetch the data. Anyway i still can not see the second param using your option. do not know what is wrong

Collectives™ on Stack Overflow

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

2 Answers 2

12 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related