角UI路由器：在状态变化保持周围的兄弟姐妹意见 [英] Angular UI Router: keeping sibling views around on state change

问题描述

我有，由此用户从列表中选择一个项目一个典型的集实体情况，它会显示在列表旁边的景色。

I have a classic set-entity situation whereby the user chooses an item from a list and it is displayed in a view next to the list.

与UI路由器实现，这将是有一个模板，其中包含了列表和UI的视图列表项的HTML和项目状态的典型方法是列表状态的孩子。

A typical way of implementing this with UI router would be to have a template which holds the html for the list and an ui-view for a list item, and the item state is a child of the list state.

我却想的项目和列表的状态是兄弟姐妹，而不是与他们的模板被插入到指定的UI观点：

I would however like the item and list states to be siblings instead, with their templates being plugged into named 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：

inbox.html:

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

在这里明显的问题是，只要你从列表中选择一个线程，列表本身消失。这可以通过复制清单视图配置中的inbox.thread状态，但列表视图仍然会重新加载每次我选择一个新的线程时间是固定的。

The obvious problem here is that as soon as you choose a thread from the list, the list itself disappears. This can be fixed by duplicating the "list" view configuration in the "inbox.thread" state, however the list view will still reload every time I choose a new thread.

我希望他们为兄弟国家的理由是，这样我可以过滤列表，从而仅针对名单命名的UI视图，而preserving与任何被选为线程的线程视图。

The reason I want them as sibling states is so that I can filter the list and thus target only the "list" named ui-view while preserving the thread view with whichever thread was chosen.

所以？ - 有没有办法坚持名为UI的意见兄弟

推荐答案

这里的答案将是：

移动共同的东西 - 。一个级别找到的最小公分母的

我们仍然可以有InboxCtrl的父级定义的。即使这种状态是抽象的。
并有可能是其中的列表数据加载和存储在$范围的地方。 两个儿童会的访问以该集合...

We can still have "InboxCtrl" defined on a parent level. Even if this state is abstract. And there could be the place where the list data are loaded and stored in $scope. Both children will have access to that collection...

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

这是记录在这里：

• 抽象状态用法示例的（滚动称为部分的组合）的

另外，连结工作plunker 的（以及来自文档）

Also, the link to working plunker (as well from documentation)

这篇关于角UI路由器：在状态变化保持周围的兄弟姐妹意见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！