如何让ng-class动态添加的类触发自定义AngularJS指令？

这个问题本质是AngularJS指令的初始化机制导致的：当你用restrict: 'C'定义类指令时，Angular只会在页面初始渲染阶段扫描DOM中静态存在的类名来匹配并触发指令。而ng-class是通过Angular的数据绑定动态添加类的，这时候指令的初始绑定流程已经完成，所以不会自动触发指令逻辑。

下面给你两种实用的解决方案，针对你的代码进行修改：

方案1：监听DOM类名变化（通用方案） #

使用原生的MutationObserver来监听元素的类名变化，当directive类被动态添加/移除时，手动执行指令的核心逻辑。这种方法不需要依赖具体的scope变量，通用性强：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.welcome = "model";
    $scope.isTrue = function() {
        return true;
    }
});
app.directive("directive", function() {
    return {
        restrict: 'C',
        scope: {
            model: '@'
        },
        link: function(scope, elem, attrs) {
            // 封装指令的核心逻辑
            function applyDirectiveEffects() {
                if (elem.hasClass('directive')) {
                    elem.css("background-color", "blue");
                } else {
                    // 移除样式，恢复默认
                    elem.css("background-color", "");
                }
            }

            // 初始加载时执行一次
            applyDirectiveEffects();

            // 创建观察者监听类名变化
            var classObserver = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    if (mutation.attributeName === 'class') {
                        applyDirectiveEffects();
                    }
                });
            });

            // 开始监听当前元素的属性变化
            classObserver.observe(elem[0], { attributes: true });

            // 页面销毁时清理观察者，防止内存泄漏
            scope.$on('$destroy', function() {
                classObserver.disconnect();
            });
        }
    }
});

方案2：监听scope中的绑定表达式（针对性方案） #

如果你知道ng-class绑定的具体scope变量或表达式，可以直接在指令中监听这个表达式的变化，这种方式更贴合Angular的数据绑定机制：

app.directive("directive", function() {
    return {
        restrict: 'C',
        scope: {
            model: '@'
        },
        link: function(scope, elem, attrs) {
            // 监听ng-class绑定的表达式变化
            scope.$watch(attrs.ngClass, function(newVal) {
                if (newVal.includes('directive')) {
                    elem.css("background-color", "blue");
                } else {
                    elem.css("background-color", "");
                }
            });

            // 初始执行一次
            if (elem.hasClass('directive')) {
                elem.css("background-color", "blue");
            }
        }
    }
});

额外建议：换用属性/元素指令（更符合Angular最佳实践） #

其实类指令在动态场景下的局限性比较大，Angular更推荐使用属性指令（restrict: 'A'）或者元素指令（restrict: 'E'）来实现这类逻辑。比如你可以把指令改成属性指令，然后用ng-if来控制指令的启用：

<!-- 用ng-if控制指令是否生效 -->
<div ng-if="isTrue()" directive>Make my background color blue using the directive</div>
<div ng-if="!isTrue()">No directive applied</div>

对应的指令修改为：

app.directive("directive", function() {
    return {
        restrict: 'A', // 属性指令
        scope: {
            model: '@'
        },
        link: function(scope, elem, attrs) {
            elem.css("background-color", "blue");
        }
    }
});

这种方式更符合Angular的设计思路，避免了手动监听DOM变化的复杂度。

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