使用 AngularJS 突出显示当前菜单

【问题标题】：Highlight current menu using AngularJS使用 AngularJS 突出显示当前菜单
【发布时间】：2019-07-28 07:16:06
【问题描述】：

我正在使用以下代码：

<li class="sidebar-list-item"><a ng-class="getClass('/dashboardHome')" href="/dashboardHome" class="sidebar-link text-muted"><i class="o-home-1 mr-3 text-gray"></i><span>Home</span></a></li>


$scope.getClass = function (path) {
        console.log("Path: "+path);
        return ($location.path().substr(0, path.length) === path) ? 'active' : '';
      }

在控制台上我得到：路径：/dashboardHome

但不是它不起作用。

【问题讨论】：

标签： jquery angularjs bootstrap-4

【解决方案1】：

如果您使用ui-sref，请这样做。

ui-sref-active="active" ui-sref="home.dashboard.dashboardHome"

您不需要使用ng-class 和getClass 函数。

更新

ui-sref-active-eq:

ui-sref-active-eq 指令应用 CSS 类，当 ui-sref/ui-state 的目标状态是直接激活的（不是当孩子状态是活跃的）。这是一个“精确匹配”，它使用 StateService.is。 -ui-router.github.io

如果您不想在子路由处于活动状态时激活parent 路由，请使用ui-sref-active-eq="active" 作为父路由。

【讨论】：