Error: $digest already in progress

在 AngularJS 应用程序中，开发人员经常会遇到 $digest already in progress 错误。这个错误意味着，当 AngularJS 尝试在应用程序中进行脏检查时，已经有一个 $digest 循环正在运行。

什么是 $digest？

$digest 是 AngularJS 中一种用于监视数据模型变化并更新视图的机制。在每个 $digest 循环中，AngularJS 检查所有绑定到作用域的表达式是否发生了变化。如果有变化，则会将其更新到视图中。

为什么会出现 $digest already in progress 错误？

当我们调用 scope.$apply() 或者 $http() 等一些异步操作在 AngularJS 应用程序中进行模型更改时，可能会触发 $digest 循环。如果此时又尝试调用 scope.$apply() 或者 $http() 等操作，就会触发 $digest already in progress 错误。

这个错误通常发生在以下两种情况：

1. 在 $digest 循环内部调用了 scope.$apply() 或者 $http() 等会触发 $digest 循环的操作。
2. 多个指令或控制器同时试图修改同一个作用域中的数据模型。

如何解决 $digest already in progress 错误？

方法一：使用 $timeout

通过将 $timeout 服务用作 $apply() 包装器，我们可以确保在下一个 $digest 循环中执行更改。这样就可以避免在 $digest 循环内部触发 $apply()，从而解决了 $digest already in progress 错误。

示例代码：

$scope.$applyAsync(function() {
  // 执行操作
});

方法二：使用 $q

通过将 $q 服务用作 $apply() 包装器，我们也可以确保在下一个 $digest 循环中执行更改。这种方法类似于使用 $timeout，但是它更加灵活，因为我们可以使用 $q 来处理异步操作。

示例代码：

$q.when($scope.$apply()).then(function() {
  // 执行操作
});

方法三：手动触发 $digest 循环

在某些情况下，手动触发 $digest 循环可能是最简单的解决方法。这可以通过调用 scope.$digest() 或者 scope.$apply() 来实现。

示例代码：

if (!$scope.$$phase) {
  $scope.$apply();
}

总结

$digest already in progress 错误是 AngularJS 中常见的错误之一。当我们要进行模型更改时，需要避免在 $digest 循环内部触发 $apply() 或者 $http() 等操作。如果必须在 $digest 循环内部进行更改，则可以使用 $timeout 或 $q 进行包装。如果一定要在 $digest 循环内部调用 $apply()，则需要手动触发 $digest 循环。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29893