AngularJS:记住带路径的复杂视图的状态/设置

Question

在单页面应用程序中,是否有一种方法可以来回切换到AngularJS路径并将其显示回以前显示的相同状态？

通常,这可以通过绑定父作用域中的数据来实现.虽然这很容易设置为轻量级视图,但对于持有大量图形元素的视图来说,这可能很麻烦.

这是一个示例,其中记住先前的路由状态可以增强用户体验:在下一页,想象一下

• 你站在第1项并选择标签2
• 然后转到第2项
• 最后切换回第1项:选项卡2不再被选中:-(

http://angular-route-segment.com/src/example/#/section1/1

在路线之间来回切换时,似乎会破坏/构建视图.

解决方案是将用户界面的状态存储在父作用域中,但它存在以下缺陷:

• 创建一个存储用户界面的所有细节的对象
• 创建关于以与以前相同的状态保存和重置UI的复杂逻辑
• 在数据模型中存储UI状态听起来不是MVC-ish

使用存储视图的div的显示/隐藏可以保存状态,但是不使用任何路由,并且必须手动实现切换业务.我喜欢使用路由,因为1.浏览器历史记录导航(url中的哈希)和2.它很容易设置.

不记住UI状态就像让Chrome在选项卡之间来回切换时重新加载页面:不是非常用户友好.

有角度吗？

Answer 1

您的 $routeSegment 方法非常有趣。$routeSegment 服务可以插入 $routeChangeStart 事件中，以便

• 以某种方式在迄今为止看到的所有路径上保留“子路径历史记录”，也许仅适用于那些明确配置为保留其 UI 状态的路径。在路径“/section1/1”的示例中，如果选择选项卡 2，则存储的子路径将为“/Y”。事情变得有趣，因为可能需要覆盖带有 $routeParams 的动态路径。
• 通过在事件处理程序中使用 $location.path 来使用此历史记录进行重定向。因此， next.originalPath 为“/section1/1”的 $routeChangeStart 事件可能会被重定向到“/section/1/Y”