Dynamically set the value of ui-sref Angularjs

Looks like this is possible to do after all.

A breadcrumb on GitHub by one of the ui-router authors led me to try the following:

<a ng-href="{{getLinkUrl()}}">Dynamic Link</a>

Then, in your controller:

$scope.getLinkUrl = function(){  return $state.href('state-name', {someParam: $scope.someValue});};

Turns out, this works like a charm w/ changing scoped values and all. You can even make the 'state-name' string constant reference a scoped value and that will update the href in the view as well :-)

There is a working plunker. The most easier way seems to be to use combination of:

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

These together could be used as:

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

So, (following this plunker) having states like these:

$stateProvider  .state('home', {      url: "/home",      ...  })  .state('parent', {      url: "/parent?param",      ...  })  .state('parent.child', {       url: "/child",      ...

We can change these values to dynamically generate the href

<input ng-model="myStateName" /><input ng-model="myParams.param" />

Check it in action here

ORIGINAL:

There is a working example how to achieve what we need. But not with dynamic ui-sref .

As we can can check here: https://github.com/angular-ui/ui-router/issues/395

Q: [A]re dynamic ui-sref attributes not supported?
A: Correct.

But we can use different feature of ui-router: [$state.go("statename")][5]

So, this could be the controller stuff:

$scope.items = [  {label : 'first', url: 'first'},  {label : 'second', url: 'second'},  {label : 'third', url: 'third'},];$scope.selected = $scope.items[0];$scope.gotoSelected = function(){  $state.go("form." + $scope.selected.url);};

And here is the HTML template:

<div>  choose the url:  <select    ng-model="selected"    ng-options="item.label for item in items"  ></select>  <pre>{{selected | json}}</pre>  <br />  go to selected  <button ng-click="gotoSelected()">here</button>  <hr />  <div ui-view=""></div></div>

The working example

NOTE: there is more up to date link to $state.go definition, but the deprecated one is a bit more clear to me

Take a look in this issue #2944.

The ui-sref doesn't watch the state expression, you can use ui-state and ui-state-params passing the variable.

  <a data-ui-state="selectedState.state" data-ui-state-params="{'myParam':aMyParam}">       Link to page {{selectedState.name}} with myParam = {{aMyParam}}  </a>

Also a quickly demo provided in the ticket.