angularjs – 任何人都可以解释使用ui-router和后退按钮的意外状态转换?

前端之家收集整理的这篇文章主要介绍了angularjs – 任何人都可以解释使用ui-router和后退按钮的意外状态转换?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用具有嵌套状态/视图的ui-router,我遇到了后退按钮的问题.

国家层级

>产品

>个人

> sub-cat-1
> sub-cat-2

>生意

> sub-cat-a
> sub-cat-b

>搜索

问题

我最初在状态product.business.sub-cat-a中加载页面.顶级页面有一个搜索输入表单,当使用时,会导致状态转换到状态搜索(通过调用$state.go()),这一切都正常.

但是,如果我点击后退按钮,我会看到状态从搜索过渡到product.business.sub-cat-a按预期(通过调用$state.transitionTo()),但是还有一个额外的调用$state.go()返回状态搜索,我无法确定此调用的来源.

如果有人能够了解ui-router正在做什么,我将不胜感激

更新

我已经将问题追溯到urlRouter和$location之间的交互.似乎$urlRouter.update有时会将stat中定义的url推送到$location,有时会将值从$location中拉出来.

在这种情况下,当出现问题时,urlRouter位置值是旧的url,它覆盖$location.url值并导致urlRouter加载旧状态而不是我们尝试返回的状态.

顺序似乎是:

>单击后退按钮
>浏览器从其历史记录中加载上一个网址
> ui-router开始加载正确的状态(以前的状态)
>在urlRouter上调用update(没有读取参数),这会导致$location根据urlRouter位置值重置为前后按钮状态url
> urlRouter然后看到两个url /状态不同,所以它重新加载现在由$location.url指定的状态,这是前回按钮url

所以问题似乎是在上面的步骤3中更新状态时不更新urlRouter位置值.

任何ui-router / angular专家,请随时指出我正确的方向.

解决方法

对于任何面临类似问题的人来说,问题在于当按下后退按钮时,会触发两个状态转换.第一个是后退按钮产生的正确;第二个是与父(业务)状态相关联的$state.go(),如上面的层次结构所示.

解决步骤生成的promise之前处理了第二个转换.这意味着在后续的$urlRoute.udpate()调用之前urlRouter位置尚未更新,因此路由器重新加载了原始页面.

希望这可能有助于节省其他人一天的调试:-)

猜你在找的Angularjs相关文章