使用Angular.js和UI路由器突出显示菜单时获取意外类

Question

我正在使用UI Router来导航菜单。当我点击第二个菜单时，它得到了激活的类，但第一个菜单仍然高亮显示。我在下面提供我的代码。

 <ul class="nav navbar-nav">
           <li ui-sref-active="active"><a ui-sref="product">Home</a></li>
            <li ng-class="{'active': $state.includes('product.eVouchers')}" class="dropdown"><a ui-sref="product.eVouchers.dashboard" class="dropdown-toggle" data-toggle="dropdown">E-Vouchers <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li ui-sref-active="active"><a ui-sref="product.eVouchers.dashboard">Dashboard</a></li>
                  <li ui-sref-active="active"><a ui-sref="product.eVouchers.code">Generate Voucher Code</a></li>
                  <li ui-sref-active="active"><a ui-sref="product.eVouchers.list">E-Voucher List</a></li>
                 </ul>
            </li>
         </ul>

当我导航到第二个菜单(i.e-E-Vouchers)时，第一个菜单与第二个菜单同时被高亮显示。但是当我在第一个菜单中时，只有第一个菜单获取active类。在这里，我需要当用户将导航到任何菜单，该菜单将只获得活动的类。

我正在使用ui-router @version v0.2.15。

Answer 1

这是因为

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

您可以自己为父菜单添加类，所以为什么不像其他菜单一样使用ui-sref-active呢？

ui-sref-active="active"

Answer 2

ui-sref-active可以位于与ui-sref相同的元素上，也可以位于父元素上。将使用在ui-sref相同级别或以上找到的第一个ui-sref-active。

ui-sref-active将在ui-sref的目标状态或任何子状态为active时激活。如果您只需要在ui-sref目标状态为active而不是它的任何子级时激活，那么您将使用ui-sref-active-eq