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

Question

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

1. MENU1

   a)子菜单1

   b)子菜单2

   c)子菜单3

2. MENU2

3. 菜单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路由器:导航到嵌套视图时,如何让父视图"活动"？

更改是:菜单获取控制器$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):也为子状态激活.

引用

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

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