[ui-sref] Reload current state with parameter - not tracking current state?

[MathewWoodhall]

Hi,

I have an app that has a location setting. When a different location is clicked the app should reload the current state with the new location as a parameter. I'm trying to do this through the ui-sref directive, rather than $state.go, so the hrefs remain in the html.

Here's my ui-sref..

<a ui-sref="{location: 'UK'}">UK</a>

and the generated html..

<a ui-sref="{location: 'UK'}" href="#/UK/home">UK</a>

This works fine initially, but when I navigate to a different state and then change the location - the app jumps back to the homepage. As if ui-router isn't tracking what the current state is in ui-sref.

Is my implementation of 'ui-sref="{location: 'UK'}"' at fault?

The generated href also doesn't update when I navigate to a different state, but I don't know if this is intentional.

[MathewWoodhall]

Found my issue..

You can also use relative state paths within ui-sref, just like the relative
paths passed to $state.go(). You just need to be aware that the path is relative
to the state that the link lives in, in other words the state that loaded the
template containing the link.

Which is what was causing my problem. Using the below is working for me...

<a data-ui-state="currentState.name" data-ui-state-params="{location: 'UK'}" > UK </a>

[christopherthielen]

@MathewWoodhall what version are you using?

See #3139 and #1031 (comment)

In legacy branch (0.3.2) there's code to use the current state but it is only processed once, when the ui-sref is linked (which means it's buggy behavior). In 1.0 we explicitly document that your original approach should work (change only param values but remain on same state). We implemented that by updating the ui-sref after every state change

So, in 0.3.2, the link gets $state.current at the time it was linked, while in 1.0, ui-sref="{ location: 'UK' }" will work as you desired.

[romanzoller]

I found this issue because I wanted to do a similar thing: Change a language state param, but stay in the same state (where same means current, i.e. it can change after the page header has been loaded).
The relevant doc says:

• Unlike the parameter values expression, the state name is not $watched (for performance reasons). If you need to dynamically update the state being linked to, use the fully dynamic [[uiState]] directive.

The solution suggested by @MathewWoodhall did the trick!