Angular UI Router - 如何在切换视图时保留视图

Question

我是 Angular 和 UI 路由器的新手。

Plunk http://plnkr.co/edit/1wfyrGryfGG5RtXozPFY?p=preview

设置 我有三个顶级应用程序导航按钮主页、项目、帮助。它们使用 Angular UI Router ui-view 指令加载不同的视图 home.html、projects.html 和 help.html。这很好用。

Projects.html 视图有一个标签栏，每个标签对应一个项目：D1、D2、D3 等，我使用 url 路由器属性显示相应的项目标签。

每次我单击“项目”按钮时，它都会完全重新加载标签栏。我丢失了当前选项卡，希望它里面是否有任何嵌套视图。基本上是 Project.html 的页面内容，也调用了控制器。

我通读了 wiki 文档，但不知道如何实现我所需的功能。我确定我错过了一些东西。它会一直重新加载视图吗？

问题：如何避免重新加载项目视图内容，以便我可以在切换到主页之前保留选定的选项卡和所有内容。因为每个项目我都会有很多嵌套的视图和模型。

Answer 1

我也想要类似的功能，但 ui-router 还不支持。我 fork ui-router 以支持“并行状态”并将其提交给项目以征求意见。谈话的要点是 ui-router 最终将支持某种形式的并行状态，但目前还不支持。同时，你可以试试我的 0.2.10 的 fork，它提供了你想要的并行状态。

在此处阅读对话：https://github.com/angular-ui/ui-router/issues/894

在此处查看示例并行选项卡：http://plnkr.co/edit/YhQyPV?p=preview

这是叉子；用 grunt 构建它：https://github.com/christopherthielen/ui-router

Answer 2

一种选择是实施一项可用于维持先前状态的服务。服务在控制器更改上持续存在，因此它们可用于维护先前的页面状态并在路由更改时更新。类似的东西会起作用。

app.factory('persitDataService', [function(currentStateData){
  var stateService = {
     state:{
        //your object data set to passed in data
     }
     //other functions here
  }; 
  return stateService   
});

然后在控制器中注入服务并分配给范围值。当路由发生变化时，只需将服务中的数据重置为新状态并注入新控制器

这应该适用于前一页状态。如果您想保存所有先前页面的状态，那么这将成为一个更大的问题，但应该以大致相同的方式完成，只需使用更复杂的服务设置。 这也可以与本地和会话存储结合使用