如何保存隐藏视图的状态?

时间:2013-09-04 06:34:45

标签: angularjs cordova

我是一名Angular新手,使用一些视图处理Phonegap应用程序:地图,列表和搜索。

当用户进行交互时,每个视图都会累积一些UI状态:拖动地图,列表获取滚动位置,为列表项打开详细视图,执行搜索等。我想要用户能够在视图之间导航而不会丢失此状态。

当我将视图放在ng-view中的部分视图中,并且我的导航链接使用href="#/path"或ng-click触发location.path(path)时,控制器将运行并且状态将被删除。有道理。

一种选择是根据用户的导航动作在index.html和ng-show中包含所有部分。但是,我发现DOM中的这种复杂性会导致Phonegap性能不佳。它也觉得通过避开路由,我失去了使用Angular的主要好处之一。

另一个想法:导航点击会导致浏览器历史记录的遍历。然而,似乎难以并行维护所有视图的状态。

我的问题:这有一个很好的模式吗?

FWIW目前正在使用Phonegap 3.0和Angular 1.1.5。谢谢你的时间。

2 个答案:

答案 0 :(得分:2)

如果要在并行视图中保留DOM的状态,那么ui-router的扩展名为ui-router-extras。它有一个很好的演示,当在标签之间切换时,状态转换和完整的DOM保存。

enter image description here

答案 1 :(得分:1)

您可以保留服务中控制器重新加载之间需要保留的所有数据

这里有一个简单的例子

Preserve state with Angular UI-Router

这里有一个更复杂的例子,包括如果用户离开页面然后按下后退按钮

则恢复状态

Maintain model of scope when changing between views in AngularJS