使用Angular.js和UI Router突出显示菜单时出现意外类

Getting unexpected class when highlight menu using Angular.js and UI Router

本文关键字：菜单 显示 意外 js Angular UI Router 使用      更新时间：2023-09-26

我正在使用UI路由器来导航菜单。当我点击第二个菜单时，它得到了活动类，但第一个菜单仍然突出显示。我在下面提供我的代码。

 <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。

这是因为

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

你自己为父菜单添加类，为什么不像其他菜单那样使用uisref活动？

ui-sref-active="active"

ui sref active可以与ui sref位于同一元素上，也可以位于父元素上。将使用与ui sref相同级别或更高级别的第一个激活ui sref。

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

相关文章：