CODEWITHSUNDEEP
angularjsangular-ui-router
Yannis
Yannis

Reputation: 343

ui-sref and variable state parameter names

I want to render a link such as:

<a ui-sref="myState({myKey: 'my variable type value'})">

where state name myState and key myKey are variables.

Is there a way to accomplish this?

Upvotes: 5

Views: 7573

Answers (6)

Rihards Neimanis
Rihards Neimanis

Reputation: 19

Actually I found a solution, so hopefully it will still help someone.

<li ng-repeat="item in array" ui-sref="stateName({param:{{item.key}}})">
     Some content
</li>

In my case I am using ui-router 1.0.15, so not sure if it will work with something older than v1.0.x

Upvotes: 1

Cyril Gandon
Cyril Gandon

Reputation: 17048

Dynamic ui-sref is not supported, but I found an advice on using the generation of the link with the href method of the $state service:

<a href="{{ctrl.url(myState, myKey)}}>

url = function(myState, myKey) {
    return $state.href(myState, {myKey: 'my variable type value'});
}

Upvotes: 1

user1752532
user1752532

Reputation:

I think the simplest solution is

<button ui-sref="myState({mykey:vm.key})"> Link </button>

where vm.key is the value being passed from the controller. This avoids extra javascript as used in the answer for this. Its very similar to the accepted answer but the variable is used into the html tag as is, without creating a handler.

Upvotes: -1

ArnonRednon
ArnonRednon

Reputation: 75

document({ id: document.id})

If your state is document/:id

Upvotes: -1

AndraeRay
AndraeRay

Reputation: 2498

How to pass parameters using ui-sref in ui-router to controller

Similar question was asked here. His solution was to set up a state that does the routing and you pass params to that state through ui-sref that triggers the desired URL

Upvotes: 0

pedrommuller
pedrommuller

Reputation: 16056

I found myself in the same situation, I couldn't acomplish that as well, try to move your code using ng-click and inside of your ng-click function use a $stage.go and pass the parameters there, something like:

$scope.clickHandler = function(param){
    $state.go('state.name',{myKey:param});
}

Upvotes: 7

Related Questions