Passing multiple parameters in $stateParams

Question

In the ui-router tutorial https://plnkr.co/edit/jbZgIg?p=info, they are passing a single parameter personId to the state.

ui-sref="people.person({ personId: person.id })"

and the state is:

{ name: 'people.person', url: '/{personId}', component: 'person', resolve: { person: function(people, $stateParams) { return people.find(function(person) { return person.id === $stateParams.personId; }); } } }

I am working on an example in which I want to pass 2 parameters (1 visible using the url, and the second hidden which will be the id that the user can't see in the url). Something similar to:

ui-sref="people.person({ personId: person.id, personUri : person.uri })"

and I want the state to become something like this (but it didn't work!):

{ name: 'people.person', url: '/{personUri}', component: 'person', resolve: { person: function(people, $stateParams) { return people.find(function(person) { return person.id === $stateParams.personId; }); } } }

As the state shows, I want to use the personUri in the url, and I want the personId to be passed to the people service.

Ankur · Accepted Answer · 2017-03-22 10:35:16Z

2

You can use params

.state('other', { url: '/:personUri', params: { personUri:"", // this param is not part of url // it could be passed with $state.go or ui-sref personId: "", } ...

answered Mar 22, 2017 at 10:35

Ankur

3,2095 gold badges30 silver badges57 bronze badges

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

3 Comments

EddyG Over a year ago

I want to receive the values of personUri and personId from the resolve. You set their params to "" ??? I want the values not "" !!!!!

Ankur Over a year ago

"" is a default value. when you use ui-sref="people.person({ personId: person.id, personUri : person.uri })", you'll get values. you can set it to null if you don't wan't use default value.

EddyG Over a year ago

Understood :) and tested :) and working ;) thanks dear.

Kamesh · Accepted Answer · 2017-03-22 10:23:38Z

Instead of passing your object in url parameters you can simply call your controller's function by passing in your object and then do whatever you want to do with that object in your controller itself and then call your service inside it.

Example:

$scope.func = function info(person){ console.log(person); PeopleService.xyz(person).then(function(response){ console.log('Service called') }) }

In html call it like this :

<button ng-click="func(person)"> Click me</button>

But the implication is that the parameters will be needed by the next state. So, calling the next state's controller isn't going to be much use. Also, even assuming that you did want to use it in this state, there may be async/await issues that he may not want (thus putting them in the ui-router's state resolve would be beneficial, if using in that state).

Collectives™ on Stack Overflow

Passing multiple parameters in $stateParams

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related