> 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
解决方法
> 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
directiveBreaking 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.