ui-router - reloading current state

Question

I am wondering how to "reload" a current state, passing in a new parameter so that my controller gets re-initialized.

I am trying to implement a search in my sidebar control - and the initial search uses $state.go to transition to my new state like this:

if ($event.type === 'click' || $event.keyCode === keyCodes.enter) {
     $state.go("people.search", { search: vm.searchText });

If I am on another state in the application, and the above code runs, everything works correctly. So, I pass in the search term as a parameter and $state.go transitions my state to the people.search state and my people controller (containing the search function) gets hit. But once I am on the people.search state and try to use the search control, the people controller code does not get hit anymore and the parameters are not getting updated.

I tried modifying the code to this:

$state.go("people.search", { search: vm.searchText }, { location: "replace" });

Now when I am on the current state, this will update the url with my new search term, but the controller code is not firing.

I need a way to force a reload of the same state that I am currently on, so that the new search parameter gets updated and the people controller code re-runs.

How do I reload the current state?

Ilan Frumer Ilan Frumer · Accepted Answer · 2014-01-06T11:42:37

Inside javascript You can call current state like so:

$state.go ('.', { search: vm.searchText } )

As of version 1.2.5 you can also use just reload the state:

$state.reload()

That's all nice, but I prefer a way to reload state with different params within a directive. So I looked inside ui-router source code just to understand that uiSref directive is ignored when the state remains the same. While it is nice to prevent reloading if nothing really changed, changing params inside the state could be useful in some cases.

So I created my own directive uiSrefParams: https://gist.github.com/IlanFrumer/8281567

Example

<span>Change language:</span>
<a ui-sref-params="{lang: 'en'}">english</a>
<a ui-sref-params="{lang: 'ru'}">russian</a>

Hope that helps.

ui-router - reloading current state

4 Answers

Example