Question

我是ui-router的新手，我想得到一个像下面的菜单（它不是崩溃的东西，请参阅plnkr）

MENU1

a）子菜单

b）子菜单

c）子菜单
MENU2
菜单3

我设法使用ui-router获取菜单和子菜单，但不确定使用ui-router的正确方法并使用ui-sref-active="active"激活菜单，我遇到的问题是当我点击子菜单我也希望活跃到父母..即如果我点击submenu1，submenu2或submneu3我想激活其父menu1。

这里是plunker：http://plnkr.co/edit/1kpmUiacrb3Aoo4E19O1?p=preview

Answer 1

有一个更新的plunker，它使用此处定义的$state.includes方法

Angular UI Router: How do I get parent view to be "active" when navigating to nested view?

更改如下：菜单获取控制器，将$state放入$scope：

"menu@dashboard": { templateUrl: "menu.html", 
            controller : function ($scope, $state){ $scope.$state = $state },
      },

而不是：

<li ui-sref-active="active"><a ui-sref=".menu1.submenu1">Menu 1</a></li>
<li ui-sref-active="active"><a ui-sref=".menu2">Menu 2</a></li>
<li ui-sref-active="active"><a ui-sref=".menu3">Menu 3</a></li>

我们必须使用ng-class定义：

<li ng-class="{active:$state.includes('dashboard.menu1')}"><a ui-sref=".menu1.submenu1">Menu 1</a></li>
<li ng-class="{active:$state.includes('dashboard.menu2')}"><a ui-sref=".menu2">Menu 2</a></li>
<li ng-class="{active:$state.includes('dashboard.menu3')}"><a ui-sref=".menu3">Menu 3</a></li>

但是：此功能将在下一个ui-router版本中，我们可以在此处看到：

feat(uiSrefActive): Also activate for child states.

举

要将激活限制为目标状态，请使用新的ui-sref-active-eq指令

突破性变化：由于ui-sref-active现在即使在子状态处于活动状态时也会激活，您可能需要将ui-sref-active与ui-sref-active-eq交换出来，我们通常认为开发人员需要自动继承

选择子菜单时，父菜单的ui-router活动类

1 个答案: