AngularJS中ng-repeat/ng-if移除Web Components问题求助

1. 给 ng-repeat 添加自定义追踪函数 #

AngularJS 的 ng-repeat 默认依赖对象引用或值进行追踪，异步更新数组时，可能误判 Web Components 对应的数组项已变更，从而删除 DOM 元素。通过 track by 指定唯一标识（比如数组项的 ID），强制 ng-repeat 基于稳定标识复用 DOM：

<!-- 使用数组项的唯一ID作为追踪标识 -->
<div ng-repeat="item in items track by item.id">
  <my-web-component [item-data]="item"></my-web-component>
</div>

即使异步更新数组，只要项的 ID 不变，ng-repeat 就会保留对应的 Web Components 元素，不会重建或删除。

2. 确保异步更新在 AngularJS 脏检查上下文内 #

当使用 Promise、原生 setTimeout 等非 AngularJS 原生异步 API 时，数组更新可能无法被脏检查机制捕获，导致 ng-repeat 同步异常：

• 用 AngularJS 的 $timeout 替代原生 setTimeout，它会自动触发脏检查：

  $timeout(() => {
    $scope.items.push({ id: Date.now(), content: 'New Item' });
  }, 500);
  

• 若必须使用 Promise，手动触发脏检查：

  fetch('/api/new-item')
    .then(res => res.json())
    .then(newItem => {
      $scope.items.push(newItem);
      // 仅在当前无脏检查周期时触发
      if (!$scope.$$phase) {
        $scope.$apply();
      }
    });
  

3. 注册 Web Components 为 AngularJS 已知元素 #

AngularJS 可能将自定义元素视为未知元素，编译时误处理。通过配置 $compileProvider，将 Web Components 标记为无需编译的已知元素：

angular.module('legacyApp').config(['$compileProvider', ($compileProvider) => {
  // 允许自定义元素标签
  const customElementTags = ['my-web-component', 'other-web-component'];
  customElementTags.forEach(tag => {
    $compileProvider.directive(tag, () => ({
      restrict: 'E',
      terminal: true, // 阻止AngularJS编译元素内部内容
      link: (scope, element) => {
        // 可选：将AngularJS scope数据传递给Web Component
        element[0].setAttribute('scope-id', scope.$id);
      }
    }));
  });
  // 启用预绑定，避免自定义元素属性绑定异常
  $compileProvider.preAssignBindingsEnabled(true);
}]);

terminal: true 会让 AngularJS 停止处理 Web Components 内部的指令，避免与 Angular 构建的 Web Components 内部逻辑冲突。

4. 修改数组时避免替换引用 #

不要直接替换整个数组对象（如 $scope.items = [...oldItems, newItem]），而是修改原数组的内容（push/splice/unshift）：

// 推荐：修改原数组
$scope.items.push(newItem);
// 不推荐：替换数组引用，可能导致ng-repeat重建整个列表
// $scope.items = $scope.items.concat([newItem]);

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