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>

对于主菜单仪表板我有子菜单

<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;
});

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

UI路由器 - 当ui-sref被指定为一个孩子的链接时，将父级设置为活动状态

1 个答案: