AngularJS：使用路由记住复杂视图的状态/设置

Question

在单页应用程序中，有没有办法来回切换到 AngularJS 路由并以与之前显示的相同状态显示它？

通常这将通过在父作用域中绑定数据来实现。虽然这对于轻量级视图来说很容易设置，但对于包含大量图形元素的视图来说，这样做会很麻烦。

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

• 您站在项目 1 上并选择选项卡 2
• 然后转到第 2 项
• 最后切换回第 1 项：不再选择选项卡 2 :-(

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

在路由之间来回切换时，视图似乎被破坏/构造了。

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

• 创建一个对象来存储用户界面的所有小细节
• 创建复杂的逻辑，将 UI 保存和重置为与以前相同的状态
• 在数据模型中存储 UI 状态听起来不像 MVC 风格

使用存储视图的div的show/hide可以保存状态但是没有使用路由，切换业务必须手动实现。我喜欢使用路由，因为 1. 浏览器历史导航（在 url 中散列）和 2. 易于设置。

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

有 Angular 方式吗？

Answer 1

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

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