CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
Ben Gannaway
Ben Gannaway

Reputation: 1083

Update URL without triggering state change

My angular app uses UI Router. I'm listening to state changes responding by scrolling to a different point. (its basically just a big parallax scroller)

So I can click menu links that take me to the correct places using the state machine, but if I want to scroll using the mousewheel, I'd like it to update the url as I scroll, but need to avoid the url change triggering an unnecessary state change.

How can I update the url to reflect the scroll position without triggering state change event etc?

Upvotes: 2

Views: 459

Answers (2)

Ben Gannaway
Ben Gannaway

Reputation: 1083

So this did the trick in the end:

$state.go('STATE_NAME',null,{location:'replace',notify:false})

Upvotes: 2

atmd
atmd

Reputation: 7490

Angulajs has a html5 mode on its $location object which allows you to use the html5 history api for urls, here's the angularjs docs on it. You'd use this for linking to certain scroll locations.

Here is a good article here on using the history api outside of angularjs to change url without refreshing.

With this you could trigger with javascript (using the history api) the url change based on the scroll position/way points.

i.e. if (scrollTop > 200) { changeUrl('some-url');} //Sudo code

EDIT: As per the comments, this would NOT stop the router trying to process the newly changed url, so might not be right for all (and indeed this) situation.

Upvotes: 0

Related Questions