Angular数组首次push后Repeater不再更新UI问题求助

看起来你的代码逻辑本身没问题，但UI不更新大概率是HTML绑定错误或Angular的digest循环未触发导致的。我来帮你一步步定位和解决：

1. 先确认HTML的正确写法 #

首先检查你的HTML是否正确关联了控制器与ng-repeat，这是最容易忽略的点：

<div ng-app="m" ng-controller="myCtrl">
  <!-- 确保ng-repeat正确绑定到$scope.values -->
  <div ng-repeat="num in values">{{ num }}</div>
  <!-- 必须用ng-click触发update，确保在Angular上下文内执行 -->
  <button ng-click="update()">添加新元素</button>
</div>

如果你的按钮是用原生JS（比如addEventListener）绑定的点击事件，第一次触发可能刚好赶上Angular的digest循环，后续就无法自动触发更新了——这时候必须让update在Angular上下文里执行。

2. 正确触发digest循环（如果需要） #

如果update是在Angular上下文外触发的（比如原生事件、第三方回调），直接用$apply可能会报错（如果已经处于digest循环中），更稳妥的方式是用$timeout（它会自动触发digest）：

$scope.update = function (){
  $timeout(function() {
    $scope.maxValue++;
    $scope.values.push($scope.maxValue);
  });
}

如果一定要用$apply，可以先检查是否处于digest循环中：

$scope.update = function (){
  if (!$scope.$$phase) {
    $scope.$apply(function() {
      $scope.maxValue++;
      $scope.values.push($scope.maxValue);
    });
  } else {
    $scope.maxValue++;
    $scope.values.push($scope.maxValue);
  }
}

3. 验证数组是否真的更新 #

可以在update里打印数组，确认数据层面确实在变化：

$scope.update = function (){
  $scope.maxValue++;
  $scope.values.push($scope.maxValue);
  console.log($scope.values); // 查看控制台输出的数组是否包含新元素
}

如果数组确实更新但UI没动，那肯定是digest循环没触发，用上面的$timeout方法基本能解决。

4. 特殊情况：ng-repeat的追踪问题 #

如果你的ng-repeat用了track by（比如track by num），要确保新push的元素值是唯一的（你的代码里maxValue递增，所以没问题）。如果是重复值，Angular会认为元素无变化，不会更新UI。

按照上面的步骤排查，应该就能解决你的问题了。

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