具有兄弟状态、UI-Router 和 ncyBreadcrumb 的深度嵌套面包屑 [英] Deeply nested breadcrumbs with sibling states, UI-Router and ncyBreadcrumb

问题描述

我最近继承了一个项目，该项目使用 UI-Router 在管理门户站点中的状态之间进行路由.这个门户有一定的复杂性，需要我们的州主要是兄弟姐妹，而不是相关的父/子.这产生了使用 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-router 示例是联系人列表.您可能有一个索引状态，在该状态下您有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-view).我们有几个列表状态，它们显示来自根"上下文的信息表.我们还有几个细节状态，它们显示了一些包含所选项目的详细信息的面板，比如集群"，它们还显示了该特定项目的子项目表.我们所有的详细视图都可以通过以下两种方式中的一种进行路由，并且根据用户在门户中导航的确切方式，面包屑可能需要显示多于两级的状态层次结构.

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. 用户点击左侧导航中的Instances，被路由到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，查看该集群的详细信息以及该集群中的 Auto Scaling 组表.
5. 用户点击一个 Auto Scaling 组，被路由到 portal.autoScalingGroupDetails，查看该 Auto Scaling 组的详细信息和该组中的实例表.
6. 用户点击同一个实例，然后被路由到 portal.instanceDetails，看到与上面第一个更直接的路径相同的详细信息.

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-router 和 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-Router 和 ncyBreadcrumb 的深度嵌套面包屑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！