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

Question

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

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

以下是一个示例，其中记住以前的路线状态可以增强用户体验：在下一页上，想象一下

• 您站在第1项并选择Tab 2
• 然后转到第2项
• 最后切换回第1项：不再选择标签2： - （

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

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

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

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

使用存储视图的div的show / hide保存状态，但是不使用任何路由，并且必须手动实现切换业务。我喜欢使用路由，因为1.浏览器历史记录导航（网址中的哈希）和2.它很容易设置。

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

是否有Angular-way？

Answer 1

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

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