Question

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

我想要做的是，当我点击第一个州（'app.web'）时，点击菜单按钮＆＃39;有效＆＃39 ; （我在主菜单和子菜单ui-sref-active="active"上使用<li>）当我点击第二个状态时，再次使用两个按钮＆＃39;活动＆＃39;

目前，以下设置为

无法正常工作，
正在工作。

主菜单链接状态：

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

子菜单链接状态：

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

Answer 1

我知道您希望两个链接都标有"active" ... 父和子 ...即使只有父级已被选中。但这不可能......

我们可以在这里阅读：

ui-sref-active

<强>描述

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

...

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

如文档（上文引用）所示：＆＃34; 当ui-sref的目标状态或任何子状态活跃＆＃34;。

换句话说，选择了父母 - 永远不会触发该功能。

以下a working 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：为什么this plunker无效？

// 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">

要点是 - ui-sref-active 取决于ui-sref。 above doc link says：

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

重点是 - 我们需要 ui-sref 。如果没有这个指令，ui-sref-active就会失败。

可以在this answer
中找到更多详情

从父状态导航到子状态

1 个答案:

ui-sref-active