从父状态导航到子状态

I have the below states, they appear in a menu which has a submenu.

我有以下状态,它们出现在具有子菜单的菜单中。

What I would like to do is, when I click on the first state ('app.web'), to have in the menu both buttons 'active' (I use ui-sref-active="active" on main and sub menu <li>) and when I click on the second state, to have again both buttons 'active'.

我想要做的是,当我点击第一个状态('app.web')时,在菜单中有两个按钮'active'(我在主菜单和子菜单上使用ui-sref-active =“active”

)当我点击第二个状态时,再次让两个按钮“激活”。

At the moment, the below setup is

目前,以下设置是

• not working if I click the main menu, but

如果单击主菜单,则无法正常工作

• is working when I click the sub menu button.

单击子菜单按钮时正在工作。

main menu link state:

主菜单链接状态:

.state('app.web', {
  url: '/:webID/dashboard',
  views: {
    'container@': {
    templateUrl: '...',
  }
}

sub menu link state:

子菜单链接状态:

.state('app.web.dashboard', {
  url: '^/:webID/dashboard',
  views: {
    'container@': {
    templateUrl: '...',
    controller: '...',
  }
 }
}

1 个解决方案

#1

I understand you want to have both links to be marked with "active" ... parent and child ... even if only parent is selected. But this is not possible...

我知道您希望两个链接都标记为“活动”...父级和子级...即使只选择了父级。但这不可能......

As we can read here:

我们可以在这里阅读:

ui-sref-active

Description

A directive working alongside ui-sref to add classes to an element when the related ui-sref directive's state is active, and removing them when it is inactive. The primary use-case is to simplify the special appearance of navigation menus relying on ui-sref, by having the "active" state's menu button appear different, distinguishing it from the inactive menu items.

与ui-sref一起使用的指令,用于在相关ui-sref指令的状态处于活动状态时向元素添加类,并在其处于非活动状态时将其删除。主要用例是通过使“活动”状态的菜单按钮显示不同来简化依赖于ui-sref的导航菜单的特殊外观,从而将其与非活动菜单项区分开来。

...

Will activate when the ui-sref's target state or any child state is active...

当ui-sref的目标状态或任何子状态处于活动状态时将激活...

As shown in the doc (cited above): "Will activate when the ui-sref's target state or any child state is active".

如文档(上面引用)所示:“当ui-sref的目标状态或任何子状态处于活动状态时将激活”。

Other words, having selected Parent - will never trigger that feature.

换句话说,选择父级 - 永远不会触发该功能。

Here is a working plunker showing how these links will be decorated:

这是一个工作的plunker显示如何装饰这些链接:

<a ui-sref-active="active" ui-sref="app">
<a ui-sref-active="active" ui-sref="app.web({webID:123})">
<a ui-sref-active="active" ui-sref="app.web.dashboard({webID:123})">

EXTEND: why is this plunker not working?

EXTEND:为什么这个傻瓜不工作?

// working
<a ui-sref-active="current" ui-sref="home">
<a ui-sref-active="current" ui-sref="home.child1">
<a ui-sref-active="current" ui-sref="home.child2">

// NOT WORKING
<a ui-sref-active="current" href="#/home">
<a ui-sref-active="current" href="#/home/child1">
<a ui-sref-active="current" href="#/home/child2">

The point is - ui-sref-active is dependent on ui-sref. The above doc link says:

关键是 - ui-sref-active依赖于ui-sref。以上文档链接说:

ui-sref-active can live on the same element as ui-sref or on a parent element. The first ui-sref-active found at the same level or above the ui-sref will be used.

ui-sref-active可以与ui-sref或父元素位于同一元素上。将使用在ui-sref相同级别或更高级别发现的第一个ui-sref-active。

The point is - we need ui-sref. Without that directive, the ui-sref-active simply won't work.

关键是 - 我们需要ui-sref。如果没有该指令,ui-sref-active将无法正常工作。

Some more details could be found in this answer

在这个答案中可以找到更多细节