如何监听DOM元素class属性变化并同步到其他元素

这种第三方库直接操作DOM绕开AngularJS绑定的情况确实头疼，我之前处理过类似需求，给你两个靠谱的方案：

方法一：用MutationObserver监听DOM类变化（最推荐） #

因为第三方库是直接修改DOM元素的类名，完全绕开了Angular的脏检查机制，常规的ng-class绑定根本同步不上。这时候用浏览器原生的MutationObserver是最稳妥的——它能精准监听DOM元素的属性变化，然后我们再手动同步父元素的状态。

你可以在组件的link函数里（如果是控制器驱动的组件，也可以放在控制器里）实现这个逻辑：

angular.module('yourApp').component('yourTargetComponent', {
  template: `
    <div id="panel" class="hide-div">
      <div id="viewPort" class="hide-div">
        <!-- 你的组件内容 -->
      </div>
    </div>
  `,
  link: function(scope, element) {
    // 获取目标DOM元素
    const viewPortEl = element[0].querySelector('#viewPort');
    const panelEl = element[0].querySelector('#panel');

    // 创建观察者实例，指定变化发生时的回调
    const classObserver = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        // 只关注class属性的变化
        if (mutation.attributeName === 'class') {
          // 同步panel的hide-div类：viewPort显示则panel显示，隐藏则隐藏
          if (!viewPortEl.classList.contains('hide-div')) {
            panelEl.classList.remove('hide-div');
          } else {
            panelEl.classList.add('hide-div');
          }
          // 如果后续有依赖这个状态的Angular绑定，记得触发脏检查
          // scope.$apply();
        }
      });
    });

    // 配置观察规则：只监听class属性的变化
    const observerConfig = { attributes: true, attributeFilter: ['class'] };

    // 启动监听
    classObserver.observe(viewPortEl, observerConfig);

    // 组件销毁时一定要停止监听，避免内存泄漏
    scope.$on('$destroy', function() {
      classObserver.disconnect();
    });
  }
});

小提示： #

• MutationObserver是浏览器原生API，性能非常好，不用担心卡顿问题；
• 组件销毁时的disconnect()一定要加，不然会残留监听导致内存泄漏；
• 如果同步类之后需要Angular更新相关视图，记得调用scope.$apply()触发脏检查。

方法二：封装成可复用指令（适合多处需要同步的场景） #

如果你的项目里不止这一处需要同步类状态，可以把这个逻辑封装成自定义指令，方便复用：

angular.module('yourApp').directive('syncClassWith', function() {
  return {
    link: function(scope, element, attrs) {
      const targetSelector = attrs.syncClassWith;
      const targetEl = document.querySelector(targetSelector);
      // 找不到目标元素就直接返回，避免报错
      if (!targetEl) return;

      const observer = new MutationObserver(function(mutations) {
        mutations.forEach(mutation => {
          if (mutation.attributeName === 'class') {
            // 这里指定要同步的类名，比如只同步hide-div
            const syncClassName = 'hide-div';
            if (targetEl.classList.contains(syncClassName)) {
              element.addClass(syncClassName);
            } else {
              element.removeClass(syncClassName);
            }
          }
        });
      });

      observer.observe(targetEl, { attributes: true, attributeFilter: ['class'] });

      // 组件销毁时清理监听
      scope.$on('$destroy', () => observer.disconnect());
    }
  };
});

然后在模板里直接用这个指令就行：

<div id="panel" class="hide-div" sync-class-with="#viewPort">
  <div id="viewPort" class="hide-div">
    <!-- 你的内容 -->
  </div>
</div>

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