联系人列表为空，请先登录

  2. 帖子详情

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

IT小君   2023-05-11T17:12:11

我是Angular和UI Router的新手。

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路由器属性显示相应的项目选项卡。

每次我点击Projects按钮时，它都会完全重新加载选项卡栏。我失去了当前选项卡，以及其中的任何嵌套视图。基本上是Project.html的页面内容，同时也调用了控制器。

我阅读了Wiki文档，但无法弄清楚如何实现我所需的功能。我确定我错过了什么。它总会重新加载视图吗？

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

评论(2)
IT小君

我也想要类似的功能，但是ui-router目前还不支持。我fork了ui-router来支持“并行状态”，并提交给项目进行评论。讨论的要点是ui-router最终会支持某种形式的并行状态，但目前还没有。与此同时，您可以尝试我的0.2.10版本的fork，它提供了您想要的并行状态。

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

在此处查看示例并行标签页plunk：http://plnkr.co/edit/YhQyPV?p=preview

这是我的fork；使用grunt构建：https://github.com/christopherthielen/ui-router

2023-05-11T17:12:34   回复
IT小君

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

app.factory('persitDataService', [function(currentStateData){
  var stateService = {
     state:{
        // 你的对象数据设置为传入的数据
     }
     // 其他函数在这里
  }; 
  return stateService   
});

然后在控制器中只需要注入该服务并分配到作用域值中。当路由更改时，只需将服务中的数据重置为新状态并注入到新控制器中即可。

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

2023-05-11T17:12:58   回复