Question

我有一个经典的设置实体情况，用户从列表中选择一个项目，并显示在列表旁边的视图中。

使用UI路由器实现此功能的典型方法是拥有一个模板，其中包含列表的html和列表项的ui视图，而项状态是列表状态的子项。

我会喜欢这个项目和列表状态而不是兄弟姐妹，他们的模板被插入到命名的ui-views中：

$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>

这里显而易见的问题是，只要从列表中选择一个线程，列表就会消失。这可以通过复制＆＃34;列表＆＃34;来解决。查看＆＃34; inbox.thread＆＃34;中的配置state，但是每次选择新线程时列表视图仍会重新加载。

我希望它们作为兄弟状态的原因是我可以过滤列表，因此只针对＆＃34;列表＆＃34;命名ui-view，同时保留线程视图，选择任何一个线程。

所以 - 有没有办法坚持兄弟姐妹的名字ui-views？

Answer 1

这里的答案是：

移动常用内容 - 升级一级。找到最低公分母。

我们仍然可以在父级别定义＆＃34; InboxCtrl＆＃34; 。即使这个状态是抽象的。并且可能存在列表数据加载并存储在$ scope中的位置。两个子项都可以访问到该集合...

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

这里记录在案：

Abstract State Usage Examples （滚动至组合一节

此外，指向working plunker的链接（以及文档）

Angular UI路由器：保持兄弟视图的状态变化

1 个答案: