如何用原生JS动态更新AngularJS指令属性并使其生效？

问题根源 #

你之前的$observe未生效，核心有两个原因：

1. 属性名不匹配：指令的scope中serviceName: '@?'默认会绑定到DOM的service-name属性（AngularJS的驼峰转短横线规则），但用户实际修改的是service属性，导致监听目标错误。
2. 原生操作脱离Angular上下文：用户用原生JS修改DOM属性后，AngularJS的脏检查机制不会自动触发，因此$observe无法感知到变更。

解决方案 #

步骤1：修正Scope绑定关系 #

修改指令的scope配置，明确将serviceName绑定到DOM的service属性：

function ($sce) {
    'use strict';

    return {
        restrict: 'E',
        templateUrl: $sce.trustAsResourceUrl('...'),
        scope: {
            serviceName: '@?service', // 绑定到DOM的service属性
        },
        controller: 'MyController',
        link: function () {}
    };
}

步骤2：正确使用attrs.$observe监听属性 #

在link函数中，监听service属性而非serviceName：

link: function (scope, element, attrs) {
    // 监听service属性的变更
    attrs.$observe('service', function(newValue) {
        if (newValue) {
            scope.serviceName = newValue;
            updateServiceName(newValue); // 执行你的业务更新逻辑
        }
    });
}

步骤3：监听原生DOM属性变更，触发Angular脏检查 #

由于用户是通过原生JS修改属性，Angular无法自动感知，需要用MutationObserver监听DOM属性变化，并手动触发$apply：

link: function (scope, element, attrs) {
    attrs.$observe('service', function(newValue) {
        if (newValue) {
            scope.serviceName = newValue;
            updateServiceName(newValue);
        }
    });

    // 创建MutationObserver监听属性变化
    const attrObserver = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.attributeName === 'service') {
                // 手动触发Angular脏检查，让$observe生效
                scope.$apply();
            }
        });
    });

    // 启动监听
    attrObserver.observe(element[0], { attributes: true });

    // 指令销毁时清理观察者，避免内存泄漏
    scope.$on('$destroy', function() {
        attrObserver.disconnect();
    });
}

额外说明 #

如果允许用户通过Angular上下文修改属性（而非原生JS），可以将serviceName改为双向绑定（=），但用户需求是原生JS操作，因此上面的方案更适配。

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