AngularJS自定义isMenuActive指令无法触发问题求助

嘿，我仔细看了你的代码，其实你的isMenuActive指令已经触发了（你可以打开浏览器控制台，页面加载时能看到trigger directive的日志），只是它的逻辑有几个小问题，导致切换路由后没法更新菜单高亮状态，看起来像是没生效。下面我给你梳理问题和修复方案：

核心问题在哪？ #

• 你的指令只在元素第一次渲染时执行一次，切换路由后不会重新检查当前状态，所以点了其他菜单后，旧的高亮不会消失，新的也不会加上
• 页面刚加载时，$state.current可能还没完全初始化，第一次检查可能不准确
• 没有处理状态变化后的清理逻辑，容易出现多个菜单同时高亮的情况

修复后的完整代码 #

修改后的指令（关键部分） #

angular.module('app', ['ui.router'])
 .config(function($stateProvider) {
 $stateProvider
 .state('home', { template: '<h2>HOME</h2>' })
 .state('about', { template: '<h2>ABOUT</h2>' })
 .state('contact', { template: '<h2>CONTACT</h2>' });
 })
 .directive('isMenuActive', ['$state', '$rootScope', function($state, $rootScope) {
 return {
 restrict: 'A',
 scope: { matches: '=isMenuActive' },
 link: function(scope, element, attrs) {
 // 把状态检查逻辑封装成函数，方便复用
 function updateActiveState() {
 console.log('检查菜单状态');
 // 先移除旧的active类，避免多个菜单同时高亮
 element.removeClass('active');
 // 遍历匹配规则，检查当前路由是否符合
 for (const match of scope.matches) {
 // 这里推荐用ui-router自带的$state.includes，支持嵌套路由匹配
 if ($state.includes(match)) {
 element.addClass('active');
 break;
 }
 }
 }

 // 页面初始化时先执行一次
 updateActiveState();

 // 监听路由切换成功事件，每次路由变化都更新状态
 const unlistenStateChange = $rootScope.$on('$stateChangeSuccess', updateActiveState);

 // 指令销毁时取消监听，防止内存泄漏
 scope.$on('$destroy', () => unlistenStateChange());
 }
 };
 }])
 .controller('mainCtrl', function($state) {
 const vm = this;
 vm.menus = [
 { name: 'Home', route: 'home', matches: ['home', 'some-other-route'] },
 { name: 'About', route: 'about', matches: ['about', 'other-route'] },
 { name: 'Contact', route: 'contact', matches: ['contact', 'another-route'] }
 ];
 vm.go = (route) => $state.go(route);
 });

原CSS和HTML保持不变 #

ul { list-style-type: none; }
ul li { display: inline-block; margin-right: 20px; cursor: pointer; font-weight: bold; }
ul li:hover { opacity: 0.7; }
.active a { color: red; }

<html ng-app="app">
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.22/angular-ui-router.js"></script>
 </head>
 <body>
 <div ng-controller="mainCtrl as vm">
 <ul>
 <li ng-repeat="menu in vm.menus" ng-click="vm.go(menu.route)" is-menu-active="menu.matches">
 <a>{{menu.name}}</a>
 </li>
 </ul>
 </div>
 <div ui-view></div>
 </body>
</html>

关键修改说明 #

1. 监听路由变化：通过$rootScope.$on('$stateChangeSuccess')监听路由切换完成的事件，每次路由变化都会重新检查菜单状态，更新高亮
2. 添加清理逻辑：在指令销毁时取消路由监听，避免内存泄漏（这在ng-repeat生成的元素里特别重要）
3. 先清后加类：每次检查前先移除active类，确保同一时间只有一个菜单高亮
4. 用$state.includes()代替字符串匹配：这是ui-router专门用来检查状态匹配的方法，支持嵌套路由（比如以后加home.detail状态，只要matches里有home，菜单依然会高亮）

额外小提示 #

如果你以后要扩展指令功能（比如添加动画、自定义高亮样式），可以直接在updateActiveState函数里加逻辑，或者通过指令的属性传递参数，这样扩展性会很好。

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