Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ui-router - reloading current state

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?

like image 955
Pacificoder Avatar asked Nov 20 '13 17:11

Pacificoder


People also ask

What is ui in router?

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).

What is ui sref active?

[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).

What is StateService in angular?

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.

What is stateProvider in AngularJS?

$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.


2 Answers

try this

$state.go($state.current, {}, {reload: true});
like image 38
shailendra pathak Avatar answered Sep 21 '22 14:09

shailendra pathak


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.

like image 83
Ilan Frumer Avatar answered Sep 22 '22 14:09

Ilan Frumer