深度嵌套面包与兄弟国家，UI的路由器和ncyBreadcrumb [英] Deeply nested breadcrumbs with sibling states, UI-Router and ncyBreadcrumb

问题描述

我继承了最近的一个项目，在管理门户网站使用的UI路由器路由状态之间。有一定的复杂性，这个门户网站，需要我们国家主要是兄妹，而不是相关的父/子。这就造成了越来越面包屑使用ncyBreadcrumb工作的问题。之前，我NCY沟和发展我自己的东西，我想知道是否有解决问题的我的方式。

I have inherited a project recently that uses UI-Router to route between states in a management portal site. There are certain complexities to this portal that require our states to primarily be siblings, rather than related parent/child. This has created an issue getting breadcrumbs to work using ncyBreadcrumb. Before I ditch ncy and develop something of my own, I am wondering if there is a way to resolve my issues.

经典UI路由器的例子是联系人列表。您可能有一个首页的状态，这下你的 contacts.list 和 contacts.details 。这两个触点状态都嵌套这可能有一些共同的布局（并很可能是一个抽象的状态）索引中。现在，在这个简单的两层次结构，它是相当两岸期待使用ncyBreadcrumb并强制详细的状态是面包屑子列表中的状态。

The classic ui-router example is the contact list. You may have an index state, underneath which you have contacts.list and contacts.details. Both of the contacts states are nested within index which probably has some common layout (and could well be an abstract state). Now, in this simple two level hierarchy, it is fairly strait forward to use ncyBreadcrumb and force the detail state to be a "breadcrumb child" of the list state.

我的门户应用程序有一个小更多的复杂性。我们有一个根门户网站的状态，其中包含我们的基本布局......在顶部单杠，导航栏左侧，主要内容区域（我们的UI视图）。我们有几个上市状态，这表明从根语境来源的信息表。我们也有几个细节状态，其显示包含所选择的项目的详细信息一些面板，说簇，并且它们也显示该特定项的子项的表。我们所有的详细​​视图可以以两种方式之一进行路由两个，这取决于用户究竟如何导航通过门户网站，面包屑可能需要显示比状态的两个层次结构更

My portal application has a little more complexity. We have a root portal state, which contains our basic layout...a horizontal bar at the top, a navigation bar to the left side, and the main content area (our ui-view). We have several listing states, which show tables of information sourced from a "root" context. We also have several detail states, which show some panels containing details of the selected item, say "cluster", and they also show a table of the child items for that particular item. All of our detail views can be routed two in one of two ways, and depending on exactly how the user navigates through the portal, the breadcrumb may need to show more than a two-level hierarchy of states.

下面是一个短的，直接导航到一个实例的细节的一个例子：

Here is an example of a shorter, direct navigation to an instance detail:

1. 用户登录时，在开始的 portal.environments 的，看到环境的细节和亚环境表。


2. 用户点击实例在左侧导航栏中，被路由到的 portal.instances 的，将看到包含在整个系统中所有实例的实例表。


3. 用户点击一个实例，被路由到的 portal.instanceDetails 的，看到的细节该实例。

1. User logs in, starts at portal.environments, sees environment details and subenvironments table.
2. User clicks Instances in left navigation, is routed to portal.instances, sees instances table containing all instances in the entire system.
3. User clicks an instance, is routed to portal.instanceDetails, sees the details for that instance.

在这种状态下，面包屑应显示是这样的：

In this state, the breadcrumb should show something like:

Instances > XYZ Instance Detail

现在，那就是让一个群集上的细节两种方式之一。另一种方式是通过其所有的父母向下钻取。点击侧边栏的实例菜单项向您介绍下管理系统中的每个实例。实例可以分为自动缩放基团，其可以组织成群集，其本身组织成堆栈，其被本身组织成子的环境中，这是他们自己组织成环境。每个级别的可以从侧边栏的菜单导航，直接，显示系统中该项目中的每一个，也可以从他们的父母被导航到。

Now, that is one of two ways of getting to the detail on a cluster. The other way is to drill down through all of it's parents. Clicking the Instances menu item in the sidebar shows you every instance in the system under management. Instances can be grouped into auto scaling groups, which can be organized into clusters, which are themselves organized into stacks, which are themselves organized into sub environments, which are themselves organized into environments. Each of these levels can either be navigated to directly from the menu in the sidebar, showing every one of that item in the system, or they can be navigated to from their parent.

所以，再次与我们的情况下，我们也可以这样做：

So, again with our instance, we could also do:

1. 用户登录时，在开始的 portal.environments 的，看到环境的细节和亚环境表。


2. 用户点击该表中的子环境，被路由到的 portal.subEnvironmentDetails 的，看到细节为该子环境和所有在该子环境中的栈的一个表中。


3. 用户点击一个堆栈，被路由到的 portal.stackDetails 的，看到的细节对于堆栈和在该堆栈簇的表。


4. 用户点击一个集群，被路由到的 portal.clusterDetails 的，看到的细节为集群和自动缩放集团在该群集的表。


5. 用户点击自动缩放组，被路由到的 portal.autoScalingGroupDetails 的，看到了那个自动缩放组的详细信息，并在该组中实例的表。


6. 用户点击同一个实例，并且被路由到的 portal.instanceDetails 的，看到同样的细节上面psented第一，更直接的路径$ P $。

1. User logs in, starts at portal.environments, sees environment details and subenvironments table.
2. User clicks a sub environment in that table, is routed to portal.subEnvironmentDetails, sees the details for that sub environment and a table of all of the stacks in that sub environment.
3. User clicks a stack, is routed to portal.stackDetails, sees the details for that stack and a table of clusters in that stack.
4. User clicks a cluster, is routed to portal.clusterDetails, sees the details for that cluster and a table of auto scaling groups in that cluster.
5. User clicks an auto scaling group, is routed to portal.autoScalingGroupDetails, sees the details for that autoscaling group and a table of instances in that group.
6. User clicks the same instance, and is routed to portal.instanceDetails, sees the same details as in the first, more direct path presented above.

在这种情况下，导航标记应该更是这样的：

In this case, the breadcrumb should be more like this:

Environments > Sub Environment A > Stack B > Cluster C > ASG D > Instance XYZ

另外，可以在任何点输入链。导航可能是栈 - >栈 - >群集 - > ASG - >实例，或者只是集群 - > ASG - >实例。因为通过它用户可以浏览到完全相同的项目，而非结构化的变化，我们有麻烦ncyBreadcrumb工作。其一，虽然我可以动态地设置的状态的父在面包屑配置该州......我怎么设置所有的家长环比上涨的状态？到目前为止，我只能够得到面包屑两种工作水平......，通常链接到父状态不正确（这是正确缺少细节，路线）。

Further, one can enter the chain at any point. The navigation could be stacks -> stack -> cluster -> asg -> instance, or just clusters -> asg -> instance. Because of the rather non-structured variations by which a user could navigate to the same exact item, we are having trouble getting ncyBreadcrumb to work. For one, while I could set the parent of a state dynamically in the breadcrumb config for that state...how do I set the states of all the parents up the chain? So far, I've only been able to get two levels of breadcrumb working...and usually the link to the parent state is incorrect (it is missing details to route properly).

时有可能使用的ui路由器和ncyBreadcrumb产生用于这种柔性导航路径？细节状态都没有任何一个国家的孩子......他们至少有两个父状态的子...取决于导航是如何开始。国家的父本身可能是别的孩子，同样取决于导航是究竟是如何开始。

Is it possible to use ui-router and ncyBreadcrumb to generate breadcrumbs for such a flexible navigation? Detail states are not children of any one state...they are children of at least two parent states...depending on how navigation was initiated. The parent of the state may itself be a child of something else, again depending on exactly how navigation was initiated.

推荐答案

我所做的是：

.state('app.visit', {
  url: "/visit/:id?date",
  templateUrl: "views/dialog.newvisit.html",
  controller: 'DialogNewVisitController',
  resolve: {
    currentState: function($rootScope) {
      $rootScope.saveCurState();
    }
  },
  ncyBreadcrumb: {
    label: 'Visit',
    parent: function($rootScope) {
      return $rootScope.getCurState().name;
    },
  }
})

和他们的某处定义的：

$rootScope.getCurState = function() {
    return $rootScope.curState;
}

$rootScope.saveCurState = function() {
    $rootScope.curState = $state.current;
}

这篇关于深度嵌套面包与兄弟国家，UI的路由器和ncyBreadcrumb的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！