AngularJS 1.5控制器多次加载问题求助

问题背景 #

使用ng-repeat配合ng-if="$first"渲染组件时，HTML仅显示一次，但组件控制器被多次实例化。相关代码如下：

HTML代码 #

<div ng-repeat="conditionForMultipleRows"> 
  <div data-ng-if="$first">
    <div co-my-component></div> 
  </div>
</div>

组件定义（TypeScript） #

export function coMyComponent(): ng.IDirective {
  return {
    template: coMyComponentTemplateHtml,
    controller: 'MyComponentController',
    controllerAs:'$ctrl'
  }
}

控制器代码（TypeScript） #

export class MyComponentController{
  state: MyStateClass;
  static $inject = [someServices]
  constructor(someServices) {
    document.getElementById("myComponent").addEventListener("myEvent", (ev: CustomEvent) => {
      doStuff()
    }
  }
}

核心原因分析 #

1. ng-repeat的DOM重建逻辑：当conditionForMultipleRows数组发生变化时，ng-repeat会销毁旧DOM并重建新DOM，即使ng-if="$first"只保留第一个元素，也会触发组件的销毁与重建，导致控制器重新实例化。
2. ng-if的动态销毁特性：ng-if是惰性指令，当表达式从false变为true时，会完全重建内部DOM结构；如果$first的上下文因数组更新重新计算，就会触发组件的重新创建。

解决方案 #

方案1：替换ng-if为ng-show #

ng-show仅控制元素的显示/隐藏，不会销毁DOM结构，组件控制器只会实例化一次：

<div ng-repeat="conditionForMultipleRows"> 
  <div data-ng-show="$first">
    <div co-my-component></div> 
  </div>
</div>

方案2：将组件移出ng-repeat #

如果组件仅需渲染一次，直接将其放在循环外部，彻底脱离ng-repeat的影响：

<div co-my-component></div> 
<div ng-repeat="conditionForMultipleRows"> 
  <!-- 循环内容 -->
</div>

方案3：使用track-by优化ng-repeat #

给ng-repeat添加track by，减少不必要的DOM重建（适合数组频繁更新的场景）：

<div ng-repeat="item in conditionForMultipleRows track by $index"> 
  <div data-ng-if="$first">
    <div co-my-component></div> 
  </div>
</div>

代码中的其他问题与修正 #

1. 控制器直接操作DOM（不符合AngularJS规范） #

避免使用document.getElementById，改用组件的link函数结合$element服务处理事件，同时避免内存泄漏：

export function coMyComponent(): ng.IDirective {
  return {
    template: coMyComponentTemplateHtml,
    controller: 'MyComponentController',
    controllerAs:'$ctrl',
    link: (scope, element) => {
      const handleMyEvent = (ev) => {
        scope.$ctrl.doStuff();
        scope.$apply(); // 外部事件触发时需手动触发脏检查
      };
      element.on('myEvent', handleMyEvent);
      // 组件销毁时移除事件监听
      scope.$on('$destroy', () => {
        element.off('myEvent', handleMyEvent);
      });
    }
  }
}

2. 语法错误 #

原控制器构造函数中addEventListener缺少闭合括号，修正后：

constructor(someServices) {
  // 建议使用上述$element方式，此处仅修正语法
  document.getElementById("myComponent").addEventListener("myEvent", (ev: CustomEvent) => {
    doStuff();
  });
}

3. 未处理事件移除 #

如果控制器多次实例化，未移除的事件监听会导致内存泄漏，上述link函数中的$destroy监听已解决此问题。

内容的提问来源于stack exchange，提问作者kåsebällchen