Set URL query parameters without state change using Angular ui-router

angularjs url angular-ui-router query-parameters
Petrus Theron picture Petrus Theron · Jan 2, 2014 · Viewed 61.5k times · Source

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?

Answer

pmont picture pmont · May 14, 2015

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 });

Related questions

Removing the fragment identifier from AngularJS urls (# symbol)

Is it possible to remove the # symbol from angular.js URLs? I still want to be able to use the browser's back button, etc, when I change the view and will update the URL with params, but I don't want …

Read More
How can I set a query parameter in AngularJS without doing a route?

My Angular app allows the user to load an item, and when that happens I'd like to set a query string that contains the item's Id so that if the user refreshes the page (or wants to link to it), …

Read More
Is there a built-in way to get the current URL without any query parameters?

If my URL is http://www.something.com/foo/bar/index.html?color=yellow&animal=rat, it seems as though: $location.path() will return foo/bar/index.html $location.absUrl() will return http://www.something.com/foo/bar/index.…

Read More