Multiple params using ui-router

Question

I am having some weird problem passing multiple parameters using ui-router

My ui-sref looks like this:

ui-sref="app.bins.view({binId:{{gridDisplayItem.id}},allowUpload:'{{gridDisplayItem.user_upload}}'})"

if I inspect the element, I see something like:

<a ui-sref="app.bins.view({binId:3,allowUpload:'No'})" href="#/app/bins/view/3">
  <i class="fa fa-folder-open" style="font-size:18px;color:green"></i>
</a>

so the correct value is being passed.

When I navigate to app.bins.view and I do a console.log($stateParams.binId); it shows 3.

If I do a console.log($stateParams.allowUpload); I get undefined.

If I do a console.log($stateParams); I get Object {binId: "3"}

According to the docs, I am doing this correctly: https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

What am I doing wrong here?

I am still getting undefined with quotes around the value. Edited my post to reflect the single quotes — Ronnie
– Ronnie, Commented Oct 1, 2014 at 18:04
more detailed information about your situation: github.com/angular-ui/ui-router/wiki/… — beauXjames
– beauXjames, Commented Oct 1, 2014 at 18:08

beauXjames · Accepted Answer · 2014-10-01 18:19:12Z

1

Most importantly, the information in the ui-router documentation (https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service) to understand is the following

$stateProvider.state('contacts.detail', {
   url: '/contacts/:contactId',   
   controller: function($stateParams){
      $stateParams.contactId  //*** Exists! ***//
   }
}).state('contacts.detail.subitem', {
   url: '/item/:itemId', 
   controller: function($stateParams){
      $stateParams.contactId //*** Watch Out! DOESN'T EXIST!! ***//
      $stateParams.itemId //*** Exists! ***//  
   }
})

You must be sure to declare your parameters in the configuration of the provider.

If the purpose of your 'allowUpload' parameter is what I think it is, there should be no reason you cannot use an ng-click event on your href to have a function called in your controller that then uses the $state.go() method to manage the view change. Just pass in the variable to the controller.

answered Oct 1, 2014 at 18:19

beauXjames

8,4283 gold badges53 silver badges68 bronze badges

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

3 Comments

Ronnie Over a year ago

I am defining my controllers in the config like controller: 'ViewBinController' but I understand this and I think using an ng-click coupled with the $state.go will work great, thank you

Ronnie Over a year ago

I'm still trying to get it to work, lol don't worry I won't leave ya hangin

beauXjames Over a year ago

I've got this pattern in lots of places...update your question is you're stuck...

Collectives™ on Stack Overflow

Multiple params using ui-router

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related