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

发布时间：2020-12-17 17:43:53 所属栏目：安全来源：网络整理

导读：我是ui-router的新手,我想得到一个像下面的菜单(它不是崩溃的东西,请看 plnkr) menu1 a)子菜单1 b)子菜单2 c)子菜单3 menu2 menu3 我设法使用ui-router获取菜单和子菜单,但不确定使用ui-router的正确方法并使用ui-sref-active =“active”激活菜单,我遇到的

我是ui-router的新手,我想得到一个像下面的菜单(它不是崩溃的东西,请看 plnkr)

> menu1

a)子菜单1

b)子菜单2

c)子菜单3
> menu2
> menu3

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

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

解决方法

有一个更新的 plunker,它使用这里定义的$state.includes方法

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

更改是：menu获取控制器,将$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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!