AngularJS : Pass in ui-router state parameter to expression

Question

I want to pass in a parameter to ui-sref using UI-Router. Usually it would be something like:

ui-sref="example.state({param: value})"

However, in my controller I set the routes in an array of objects like:

self.dynamicId = $stateParams.id;

self.menu = [
  {
    label: 'Example1',
    route: 'example.state1',
    stateName: 'state1'
  },
  {
    label: 'Example2',
    route: 'example.state2',
    stateName: 'state2'
  }
];

How do I pass in the dynamicId parameter using an Angular expression in my template?

<div ng-repeat="link in menu">
    <a ui-sref="{{ link.route }}"></a>
</div>

Right now I'm hardcoding the state name, which sort of defeats the purpose of using ui-sref:

<a ui-sref="example.{{stateName}}({id: dynamicId})"></a>

Community · Accepted Answer · 2017-05-23 11:58:22Z

1

I would say, that similar issue is discussed here

Angularjs adding html to variable with ui-sref link

In a nutshell (check the working plunker) - we can use combination of the natural Angular and UI-Router features:

ng-href (doc here)
$state.href() (doc here) and

NOTE: This would work for params defined as part of url (not just params : {} - without url representation)

The link would look like this:

<a ng-href="{{$state.href(myStateName, myParams)}}">

I'd recommend to play with this plunker, to see it in action.

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered May 10, 2015 at 18:11

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

Comments

Reto Aebersold · Accepted Answer · 2015-05-08 15:56:58Z

0

I don't think it is possible right now. Have a look at this issue. One solution would be to precalculate the url with stateName and dynamicId using $state.href if this is possible in your scenario.

answered May 8, 2015 at 15:56

Reto Aebersold

16.7k5 gold badges58 silver badges76 bronze badges

Collectives™ on Stack Overflow

AngularJS : Pass in ui-router state parameter to expression

2 Answers 2

Angularjs adding html to variable with ui-sref link

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related