67

How should I update the address bar URL with a changing query parameter using AngularJS' ui-router to maintain state when refreshing the page?

Currently, I am using $state.transitionTo('search', {q: 'updated search term'}) whenever input changes, but the problem is that this reloads the controller, redraws the window and loses any text input focus.

Is there a way to update stateParams and sync it to the window URL?

2

3 Answers 3

80

I was having trouble with .transitionTo until I updated to ui-router 0.2.14. 0.2.14 properly changes the location bar (without reloading the controller) using a call like this:

$state.transitionTo('search', {q: 'updated search term'}, { notify: false });
10
  • 2
    best answer, least hackish
    – ilovett
    Commented Jun 9, 2015 at 19:53
  • Finally something that works! Thanks @pmont I was using dynamic: true in the params but not only was it not working consistently it is not even necessary if I follow your approach.
    – pcatre
    Commented Jun 16, 2015 at 11:11
  • That's what I was looking for sweet n short.
    – murli2308
    Commented Nov 21, 2015 at 5:55
  • 1
    $state.go calls $state.transitionTo internally but automatically sets options to { location: true, inherit: true, relative: $state.$current, notify: true }. This allows you to easily use an absolute or relative to path and specify only the parameters you'd like to update (while letting unspecified parameters inherit from the current state.
    – Aakash
    Commented Jun 23, 2016 at 8:12
  • 2
    But when I use this solution, it seems it will reload the components. I am using the latest Angular UI router 1.0.0.beta3
    – Hantsy
    Commented Nov 23, 2016 at 5:39
28

edit: Played around with this some more 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

It's set to true by default, but if you set it to false on your state, then the state change won't happen when the query parameters are changed. You can then call $location.search(params); or $location.search('param', value); and the URL will change, but ui-router won't re-build the entire controller/view. You'll probably also need to listen for the $locationChangeStart event on the root scope to handle back and forward history actions within your app, as these also won't cause state changes.

I'm also listening for the $stateChangeSuccess event on my controller's scope to capture the initial load of the page/route.

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

The previous version of my answer mentioned this github issue:

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

But that's a slightly separate issue, specifically showing a modal of one state over another state without the non-modal state changing. I tried the patch in that issue, but it's clear that it isn't meant for preventing the entire state from reloading on URL change.

3
  • 6
    How do you get hold of the new search params after you do $location.search? After doing $location.search it seems $stateParams doesn't get updated and $routeParams doesn't have the new value.
    – DownChapel
    Commented Feb 13, 2014 at 10:32
  • @DownChapel I'd very much like to know myself
    – Maruf
    Commented Feb 13, 2015 at 12:37
  • @DownChapel you will have to listen on $locationChangeStart in your controller and there you can use $location.search() to get the current query parameters
    – Anditthas
    Commented Jun 2, 2016 at 14:35
28

Update May 19, 2015

As of ui-router 0.2.15, the issue of reloading the state on query parameter changes has been resolved. However, the new update broke the history API back and forward capabilities with query parameters. I have not been able to find a workaround for that.

Original

Jay's answer didn't work for me, and neither did a ton of other answers. Trying to listen to $locationChangeStart caused problems when trying to go back and forth in the browser history as it would cause me to run code twice: once when the new state changed and another because $loationChangeStart fired.

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

When you change $location.search() to update the query parameters, use a "hack" to temporarily disable reloading on search, set query parameters, then re-enable reloading.

$state.current.reloadOnSearch = false;

$location.search('query', [1,2]);

$timeout(function () {
  $state.current.reloadOnSearch = undefined;
});

This will ensure that query parameter changes do not reload the state and that url path changes will reload the state properly.

However, this didn't get the browsers history to change the state (needed for knowing when a query parameter changes to re-read the URL) when a query parameter was part of the url. So I also had to add each query parameter's name to the url property of the state.

$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 listed this way, but any changes to those parameter names will reload the state when hitting the back and forward buttons on the browser.

Hopefully others find this useful and it doesn't take them multiple days to figure out how to do it (like I did).

5
  • 1
    I am so pissed i did not find this sooner. I have an entire app designed around dealing with this bug and the hacks involved. I just implemented your reloadOnSearch hack into a nice method and it worked perfectly. Nice job. Commented May 13, 2015 at 11:20
  • This is THE correct answer without any side-effects. Great work! Easy and simple. Commented Jun 9, 2015 at 21:04
  • I did something similar to this, but ran into issues with values of $stateParams being injected into a resolve. At least with 0.2.15, params that have been changed in the URL, will revert back to their previous values, when transitioning from a child state back to the parent (at least, when provided into a resolve via $stateParams). Commented Aug 18, 2015 at 22:51
  • That does not work for me. anyone tested it recently on angular 1.6?
    – Gal Bracha
    Commented May 1, 2017 at 11:27
  • Its a hack but works for me in angular 1.8.0 + ui-router 1.0.27 including the history. if ($state.$current.navigable.params.hasOwnProperty('tab')) { $state.$current.navigable.params['tab'].dynamic = true; } $location.search(locationSearch); $timeout(function () { currentState.reloadOnSearch = reloadOnSearchBefore; if ($state.$current.navigable.params.hasOwnProperty('tab')) { $state.$current.navigable.params['tab'].dynamic = false; } });
    – geskill
    Commented Jul 27, 2020 at 21:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.