Question

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

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

设置我有三个顶级应用程序导航按钮Home，Projects，Help。他们使用Angular UI Router ui-view指令加载不同的视图home.html，projects.html和help.html。这很好用。

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

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

我阅读了wiki文档，无法弄清楚如何实现我所需的功能。我相信我错过了一些东西。它会不会重新加载视图？

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

Answer 1

我也想要类似的功能，但是ui-router还没有支持它。我分叉ui-router来支持＆＃34;并行状态＆＃34;并将其提交给项目进行评论。谈话的要点是ui-router最终将支持某种形式的并行状态但尚未支持。在此期间，您可以尝试我的0.2.10分叉，它提供您想要的并行状态。

在此处阅读对话：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   
});

然后在控制器中注入服务并分配一个范围值。当路由更改时，只需将服务中的数据重置为新状态并注入新控制器

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

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

2 个答案: