current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 14 down vote favorite
6

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?

share|improve this question
    
I've noticed $state.go() does not reload the controller if you direct it to the same state that you're in with just the parameters changing. Does this help you? –  Arne HB Oct 10 '14 at 10:50
2  
go will reload the controller : angular-ui.github.io/ui-router/site/#/api/… –  Ronan Quillevere Oct 29 '14 at 16:06

1 Answer 1

up vote 16 down vote

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.

share|improve this answer
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 Feb 13 '14 at 10:32
    
@DownChapel I'd very much like to know myself –  Marius V Miliunas yesterday

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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