UI 路由器 - 当 ui-sref 作为链接到一个孩子时，将所有子状态的父设置为活动

Question

您好，我创建了一个 AngularJS 应用程序。我正在使用 UI 路由器。 我有一个主菜单，然后是子菜单。 主菜单我有类似的东西

<ul class="nav nav-pills">
                <li ng-class="{'active':$state.includes('home')}"><a ui-sref="home.main1">Home</a></li>
                <li ui-sref-active="active"><a ui-sref="dashboard.dash1">Dashboard</a></li>
                <li ui-sref-active="active"><a ui-sref="report">Reports</a></li>
                </ul>

对于一个主菜单 home 我有子菜单

<ul class="nav nav-tabs" role="tablist">
<li ui-sref-active="active"><a ui-sref="home.main1">Main 1</a></li>
<li ui-sref-active="active"><a ui-sref="home.main2">Main 2</a></li>
</ul>

对于主菜单 dashboard 我有子菜单

<ul class="nav nav-tabs" role="tablist">
  <li ui-sref-active="active"><a ui-sref="dashboard.dash1">Dashboard 1</a></li>
  <li ui-sref-active="active"><a ui-sref="dashboard.dash2">Dashboard 2</a></li>
</ul>

在上面，子菜单根据 URL 变为活动状态。但父菜单未激活。

在仪表板中，我设置了 ui-sref-active 但问题是 ui-sref**我设置为 **dash1 状态。因此，仪表板状态仅在 dash1 处于活动状态时才变为活动状态，而不是 dash2。 如您所见，我在家里尝试使用 ng-class 。但它不起作用。

这里是plnkr Demo。

当孩子处于活动状态时，如何设置父状态处于活动状态？

Answer 1

<li ng-class="{'active':$state.includes('home')}">

您在上面与ng-class 一起使用的表达式是在当前$scope 的上下文中计算的。您的控制器没有在 $scope 上定义任何内容，因此表达式失败。

您可以这样做以使其正常工作 (plunkr)：

app.controller('testCtrl', function($scope, $state) {
  console.log($state.current.name);
  $scope.$state = $state;
});

将服务放在范围内的优点值得商榷。