4

We are using angularJS and angular ui-router and want to change the URL in the address bar but keep the view/state the same.

I have tried using history pushstate but I am having conflicts with it causing an infinite $digest loop.

I have also tried the method described in sync() https://github.com/angular-ui/ui-router/wiki/Quick-Reference#urlroutersync - which is essentially calling preventDefault on $locationChangeSuccess. However, this doesn't seem to work - as demonstrated by this plunkr: http://plnkr.co/pLC2Ai

Does anyone know of any solutions to this issue?

wlingke
  • 4,699
  • 4
  • 36
  • 52
  • When i click on Route 1, it changes to state 1, Route 2 : state 2. What doesn't work and what is it supposed to do? – Philipp Gayret Jan 18 '14 at 18:38
  • It should NOT show the state (versus it is right now). I just updated the plunker so you can see the $location.path() and the action I'd like to see is NOT changing the state but CHANGING the path. – wlingke Jan 18 '14 at 19:53
  • With changing the part, do you literally mean the URL you see in plunker? Because you should check the iframe of your code running http://run.plnkr.co/plunks/pLC2Ai/ – Philipp Gayret Jan 18 '14 at 20:03
  • Yes that is what I mean and also yes, I checked against the iframe – wlingke Jan 18 '14 at 20:06
  • For me, this is the perfect answer: http://stackoverflow.com/a/24102139/1309218 – Tsuneo Yoshioka Jul 16 '14 at 02:18

2 Answers2

2

Of course, my mate! :)

use $stateChangeStart, not $locationChangeSuccess

Miraage
  • 3,334
  • 3
  • 26
  • 43
  • I've tried this. It used to work in older versions of angular ui router but it no longer does. It prevents both the state and path from changing. http://plnkr.co/zq3WYq – wlingke Jan 18 '14 at 19:49
  • Really close... You can't see the effect on plunker since they don't alter the address bar, but I just tried this in my app. The address bar doesn't change but `console.log($location.path())` indeed shows correctly. – wlingke Jan 18 '14 at 20:03
0

Have you tried the history.pushState method?

On Mozilla's site the say: "This will cause the URL bar to display http://mozilla.org/bar.html, but won't cause the browser to load bar.html or even check that bar.html exists."

history.pushState(stateObj, "page 2", "bar.html");

You may need to inject $locationProvider and then set $locationProvider.html5Mode(true).

rg88
  • 20,742
  • 18
  • 76
  • 110
  • Yes I have tried that before. It conflicts with angular and tends to cause an infinite digest loop. Check it out here: http://run.plnkr.co/plunks/9afPBd/ and http://plnkr.co/edit/9afPBd?p=preview This issue is noted in angularJS's issues log but there's been no fixes as of yet – wlingke Jan 18 '14 at 21:35