如何在HTML中使用addActive自定义指令实现菜单URL高亮？

首先，AngularJS的驼峰式指令名在HTML中需要转换成短横线分隔的形式（add-active），你只需要把这个属性加到菜单的父元素上，让指令的逻辑能作用到整个菜单列表。

1. 在HTML中添加指令属性 #

你可以把add-active属性加到包裹菜单的<ul>元素上（推荐，因为它是菜单的直接父容器），修改后的HTML代码如下：

<div id="sidebar-left" class="col-xs-2 col-sm-2">
  <ul class="nav main-menu" add-active> <!-- 这里添加指令属性 -->
    <li class="dropdown ng-scope" ng-repeat="parent in menu">
      <a href="/employee/Home" class="dropdown-toggle" ng-click="tabName(parent.name)">
        <i class="fa fa-home"></i>
        <span class="hidden-xs ng-binding">Home</span>
      </a>
    </li>
    <li class="dropdown ng-scope" ng-repeat="parent in menu">
      <a href="/documents/doc_details" class="dropdown-toggle" ng-click="tabName(parent.name)">
        <i class="fa fa-file-text"></i>
        <span class="hidden-xs ng-binding">Documents</span>
      </a>
    </li>
    <li class="dropdown ng-scope" ng-repeat="parent in menu">
      <a href="#" class="dropdown-toggle" ng-click="tabName(parent.name)">
        <i class="fa fa-money"></i>
        <span class="hidden-xs ng-binding">Pay &amp; Benifits</span>
      </a>
      <ul class="dropdown-menu">
        <li ng-repeat="child in parent.children" class="ng-scope">
          <a href="/pay/paymanagement" ng-click="tabName(child.name)" class="ng-binding">slips</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

当然，你也可以把add-active加到外层的<div id="sidebar-left">上，效果是一样的，因为你的指令逻辑是通过全局选择器查找元素的。

2. 修复指令的异步渲染问题 #

注意到你的菜单是用ng-repeat动态生成的，而指令的link函数会在元素初次链接到作用域时执行，这时候ng-repeat可能还没渲染完菜单元素，导致找不到对应的<li>。你需要用$timeout延迟逻辑执行，确保DOM已经完全渲染：

.directive('addActive', ['$timeout', function($timeout) { // 注入$timeout服务
  return {
    link: function(scope, element, attrs) {
      $timeout(function() { // 延迟到下一个digest cycle执行
        const pageUrl = location.pathname;
        $('#sidebar-left .nav li.active').removeClass("active");
        if (pageUrl) {
          $('.nav li:has(a[href="' + pageUrl + '"])').addClass("active");
        }
      });
    }
  }
}]);

3. 优化建议（可选） #

为了让指令更通用、不依赖全局DOM选择器，你可以改成只在指令所在的元素内部查找元素，这样即使页面有多个菜单，指令也不会互相影响：

.directive('addActive', ['$timeout', function($timeout) {
  return {
    link: function(scope, element, attrs) {
      $timeout(function() {
        const pageUrl = location.pathname;
        // 只在当前指令绑定的元素内查找，避免全局影响
        element.find('li.active').removeClass("active");
        if (pageUrl) {
          element.find('li:has(a[href="' + pageUrl + '"])').addClass("active");
        }
      });
    }
  }
}]);

这样修改后，指令就完全依赖绑定的父元素，不需要依赖#sidebar-left这个ID了，复用性更强。

内容的提问来源于stack exchange，提问作者laz