angularjs - 选择子菜单时父菜单的 ui-router 事件类

Question

我是 ui-router 的新手，我想要一个像下面这样的菜单(它不是一个崩溃的东西，请参阅 plnkr)

菜单 1

a) 子菜单 1

b) 子菜单 2

c) 子菜单 3

菜单 2

menu3

我设法使用 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?

更改为:菜单获取 Controller ，其中放置 $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.

引用

To limit activation to target state use new ui-sref-active-eq directive

Breaking Change: Since ui-sref-active now activates even when child states are active you may need to swap out your ui-sref-active with ui-sref-active-eq, thought typically we think devs want the auto inheritance.