Javascript 角度UI路由器：在状态更改时保留兄弟视图

我有一个典型的集合实体情况，用户从列表中选择一个项目，并将其显示在列表旁边的视图中

使用UIRouter实现这一点的一种典型方法是，使用一个模板保存列表的html和列表项的UI视图，并且项状态是列表状态的子项

但是，我希望项目和列表状态是同级的，它们的模板插入到命名的ui视图中：

$stateProvider.state("inbox", {
  abstract: true,
  url: "/inbox",
  templateUrl: "inbox.html"
}).state("inbox.list", {
  url: "?filter_by",
  views: {  
    list: {
      templateUrl: "inbox.list.html",
      controller: "ListCtrl"
    }
  }
}).state("inbox.thread", {
  url: "/:id?filter_by",
  views: {  
    thread: {
      templateUrl: "inbox.list.html",
      controller: "ListCtrl"
    }
  }
})

inbox.html：

<div class="wrapper">
  <div class="more wrappers">
    <ul ui-view="list"></ul>
  </div>
  <div ui-view="thread"></div>
</div>

这里明显的问题是，只要从列表中选择一个线程，列表本身就会消失。这可以通过在“inbox.thread”状态下复制“list”视图配置来修复，但是每次选择新线程时列表视图仍将重新加载

我希望将它们作为同级状态的原因是，我可以过滤列表，从而只针对名为ui视图的“列表”，同时保留选择哪个线程的线程视图

---

那么--有没有办法持久化同级命名ui视图？这里的答案是：

将普通的东西向上移动一级。找到最低的公分母

我们仍然可以在父级定义“InboxCtrl”。即使这种状态是抽象的。 并且可能有一个地方，列表数据被加载并存储在$scope中两个孩子都将有权访问该集合

$stateProvider.state("inbox", {
  abstract: true,
  url: "/inbox",
  templateUrl: "inbox.html",
  controller: function($scope){
      $scope.items = ... // load data only once 
  } 
})

这里记录了这一点：

• （滚动到名为“组合”的部分）

---

此外，链接到（以及来自文档）

您应该真正接受您得到的答案，因为它优雅地解决了您的问题！