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?
UI-Router is the defacto standard for routing in AngularJS. Influenced by the core angular router $route and the Ember Router, UI-Router has become the standard choice for routing non-trivial apps in AngularJS (1. x).
[uiSrefActive] : When this selector is used, the class is added when the target state or any child of the target state is active. [uiSrefActiveEq] : When this selector is used, the class is added when the target state is exactly active (the class is not added if a child of the target state is active).
Class StateService. Provides state related service functions. This class provides services related to ui-router states. An instance of this class is located on the global UIRouter object.
$stateProvider is used to define different states of one route. You can give the state a name, different controller, different view without having to use a direct href to a route. There are different methods that use the concept of $stateprovider in AngularJS.
try this
$state.go($state.current, {}, {reload: true});
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
<span>Change language:</span>
<a ui-sref-params="{lang: 'en'}">english</a>
<a ui-sref-params="{lang: 'ru'}">russian</a>
Hope that helps.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With