Set stateless URL request parameters using Angular ui-router

Question

How can I update the address bar URL using a changing request parameter using AnglerJS 'ui-router to maintain state when the page is refreshed?

I am currently using $state.transitionTo('search', {q: 'updated search term'}) when changes are made, but the problem is that it restarts the controller, redraws the window and loses focus on the text input.

Is there a way to update stateParams and synchronize it with the window url?

Answer 1

I had problems with .transitionTo until I upgraded to ui-router 0.2.14. 0.2.14 correctly changes the location of the panel (without rebooting the controller) using a call like:

 $state.transitionTo('search', {q: 'updated search term'}, { notify: false }); 

Answer 2

edit: playing with it today and realized that angular ui-router has a similar option as the native routerProvider: "reloadOnSearch".

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#options-1

By default, it is set to true , but if you set it to false in your state, then the state will not change when the request parameters are changed. Then you can call $location.search(params); or $location.search('param', value); and the url will change, but ui-router will not re-build the entire controller / view. You may also need to listen to the $locationChangeStart event in the root area in order to process backward and forward history actions in your application, as they will also not cause state changes.

I also listen to the $stateChangeSuccess event in the area of ​​my controller to fix the page / route load.

There is some github discussion for using this function with path changes (and not just URL changes): https://github.com/angular-ui/ui-router/issues/125 , but I have not tested this at all since my use case was specific to query string parameters.

In a previous version of my answer, this github issue was mentioned:

https://github.com/angular-ui/ui-router/issues/562

But this is a slightly separate problem, in particular, demonstrating the modality of one state over another state without changing the modeless state. I tried a fix for this problem, but it is clear that it is not intended to prevent the entire state from reloading when the URL changes.

Answer 3

May 19, 2015 Patch

As in ui-router 0.2.15, the problem of state reloading when changing request parameters was solved. However, the new update violated the capabilities of the API back and forth of the API with request parameters. I could not find a workaround for this.

Original

The answer to the answer did not help me, and there weren’t a ton of other answers. Trying to listen to $locationChangeStart caused problems when trying to go back and forth in the browser history, as this will cause me to run the code twice: once when the new state has changed, and another because $loationChangeStart fired.

I tried using reloadOnSearch=false , but prevented state changes even when the URL path was changed. So I finally got it to work by doing the following:

When changing $location.search() to update the request parameters, use "hack" to temporarily disable reloading during the search, set the request parameters, then re-enable reloading.

 $state.current.reloadOnSearch = false; $location.search('query', [1,2]); $timeout(function () { $state.current.reloadOnSearch = undefined; }); 

This ensures that changes to the request parameters do not reload the state and that changes to the URL path will reload the state properly.

However, this did not cause the browser history to change state (necessary to find out when the request parameter changes to re-read the URL) when the request parameter was part of the URL. Therefore, I also had to add each request parameter name to the state url property.

 $locationProvider.html5Mode(true); $stateProvider .state('home', { url: '/?param1&param2&param3', templateUrl: 'home.html', controller: 'homeCtrl as home', }); 

Any parameter names on the url are optional when specifying this method, but any changes to these parameter names reload the state when you click the back and forward buttons in the browser.

We hope that others find this useful, and they don’t need many days to figure out how to do this (like me).