更新URL而不触发状态更改

时间:2021-05-03 21:00:25

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)

我的角应用使用UI路由器。我正在通过滚动到不同的点来听状态变化。(它基本上只是一个大视差滚动条)

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.

所以我可以点击菜单链接,这些链接可以让我使用状态机到达正确的位置,但是如果我想使用鼠标滚轮滚动,我希望它在我滚动时更新url,但是需要避免url更改触发不必要的状态更改。

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

如何更新url以反映滚动位置而不触发状态更改事件等?

2 个解决方案

#1


2  

So this did the trick in the end:

所以这最终起到了作用:

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

#2


0  

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.

Angulajs在其$location对象上有一个html5模式,允许您对url使用html5 history api,这里有angularjs文档。你可以用它来链接到特定的滚动位置。

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

这里有一篇关于在angularjs之外使用history api来更改url而不刷新的好文章。

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

这样,您就可以使用javascript(使用history api)根据滚动位置/路径点触发url更改。

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

即if (scrollTop > 200) {changeUrl('some-url');} /Sudo代码

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.

编辑:根据评论,这不会阻止路由器处理新修改的url,因此可能不适合所有的情况(实际上是这种情况)。

#1


2  

So this did the trick in the end:

所以这最终起到了作用:

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

#2


0  

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.

Angulajs在其$location对象上有一个html5模式,允许您对url使用html5 history api,这里有angularjs文档。你可以用它来链接到特定的滚动位置。

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

这里有一篇关于在angularjs之外使用history api来更改url而不刷新的好文章。

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

这样,您就可以使用javascript(使用history api)根据滚动位置/路径点触发url更改。

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

即if (scrollTop > 200) {changeUrl('some-url');} /Sudo代码

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.

编辑:根据评论,这不会阻止路由器处理新修改的url,因此可能不适合所有的情况(实际上是这种情况)。