Change the url with Angular UI-Router, do nothing else

Question

There doesn't appear to be a built-in way to update the url without running all of the other processes, e.g. invoking controllers.

The option "reload", only works with $location.search()

Is there a method, or approach to achieve

How may I achieve something similar to:

$state.go('stateName', params, {justChangeTheUrl: true})

With Angular UI-Router?

just define your state url with this param {url: 'stateName?reload}' — Umidbek
– Umidbek, Commented Aug 4, 2014 at 20:33

biofractal · Accepted Answer · 2015-08-13 08:19:00Z

3

If you just want to change the url without having that change processed by ui-router then you can use the following perfectly acceptable hack (coffeescript):

scopeOff = $scope.$on '$stateChangeStart', (e) ->
  e.preventDefault()
  scopeOff()

$location.path 'just/change/the/url'

Notes

Normally making a change to the browser url via $location.path() would trigger ui-router to begin its processing. This processing starts with the ui-router specific event called $stateChangeStart.

In the code above, however, you are catching and, via e.preventDefault(), throwing away this initial call to $stateChangeStart event and so preventing ui-router from processing the url change.

The watch on the $stateChangeStart event is 'single use', that is the code automatically detaches itself from the event after one run (this is what the call to scopeOff() is doing).

The net effect is to change the url in the browser without triggering ui-router processing and to only apply this restriction to the one url you have just changed. Neat, but not as neat as the new deferIntercept feature that will be with us soon.

edited Aug 13, 2015 at 8:19

answered Aug 4, 2014 at 21:01

$biofractal's user avatar$

biofractal

19.2k12 gold badges72 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TaylorMac Over a year ago

Won't preventDefault prevent the url from changing too?

biofractal Over a year ago

@TaylorMac Please see the Notes I have added to the answer.

TaylorMac Over a year ago

Note on deferIntercept, this allows you to intercept the stateChange process, but it appears that you can only modify when the entire process (of the route updating and state changing) occurs. So to update the URL without changing the state, you would need to not just Defer the process, but cancel it completely, and update the url manually yourself, which is completely prevented by Angular's $route service.

Umidbek · Accepted Answer · 2014-08-04 20:38:05Z

0

Define state parameter in url

 $stateProvider.state('stateName', {
     url: '/state/path?reload'
 });

But be carefull, every $location.search() change on reload param will trigger $stateChangeStart event, and your controller will be recreated

answered Aug 4, 2014 at 20:38

Umidbek

1,50412 silver badges26 bronze badges

2 Comments

TaylorMac Over a year ago

What about if we don't want the state to reload only sometimes, I think this is why having an option at the call site is better

Umidbek Over a year ago

yes it is, but there are no proper solution, just wierd hacks

Collectives™ on Stack Overflow

Change the url with Angular UI-Router, do nothing else

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related