在这种情况下，如何防止 $apply 已经在进行中？

Question

我有this example，这是一个带有删除项目选项的基本列表。

当用户尝试删除某些内容时，需要确认。而且，为了演示将删除哪个项目，我有条件地更改了表格行的颜色。

问题是，如果在confirm() 语句之前不使用$scope.$apply()，我无法更改所选行的颜色。

$scope.removeEntry = function(index) {
    $scope.entries[index].toBeRemoved = true;
    $scope.$apply();
    if (confirm("Are you sure you want to delete this item?") === true) {
        $scope.entries.splice(index, 1);
    }else{
        $scope.entries[index].toBeRemoved = false;
    }
};

但这给了我：

错误：[$rootScope:inprog] $apply 已经在进行中

我是否遗漏了什么，或者有什么更好的方法可以防止这种情况发生？

我已经尝试了this answer 上的几乎所有建议，但均未成功。

Answer 1

另一种解决方案可帮助您解决此问题。你可以使用来自 Angular 的$evalAsync。

var app = angular.module('plunker', [])

.controller('ListController', ['$scope', '$timeout', function($scope, $timeout) {
    $scope.entries = [{name:"potatoes"},
                      {name:"tomatoes"},
                      {name:"flour"},
                      {name:"sugar"},
                      {name:"salt"}];

    $scope.removeEntry = function(index) {
        $scope.entries[index].toBeRemoved = true;
        $evalAsync(function() {
          if (confirm("Are you sure you want to delete this item?") === true) {
            $scope.entries.splice(index, 1);
          }else{
              $scope.entries[index].toBeRemoved = false;
          }
        })
    };
}]);

在$evalAsync 和$timeout 之间进行选择取决于您的具体情况：

• 如果代码使用指令中的 $evalAsync 进行排队，它应该在 Angular 操作 DOM 之后但在浏览器呈现之前运行。

• 如果代码在控制器中使用 $evalAsync 进行排队，它应该在 Angular 操作 DOM 之前（以及在浏览器呈现之前）运行——你很少需要这个

1234563 p>

Answer 2

解决您的情况的方法是使用 $timeout from angular: http://plnkr.co/edit/ZDkGMqmwtxh7HSvBEWYp?p=preview

这是关于 $apply 与 $timeout 讨论的帖子：Angular $scope.$apply vs $timeout as a safe $apply

$scope.removeEntry = function(index) {
    $scope.entries[index].toBeRemoved = true;
    $timeout(function() {
      if (confirm("Are you sure you want to delete this item?") === true) {
        $scope.entries.splice(index, 1);
      }else{
          $scope.entries[index].toBeRemoved = false;
      }
    })
};

您一定是搞砸了正确实施它。