Angular $scope 不会在 bootbox 回调中更新

Question

这是我关于 SO 的第一个问题。

当我在作用域上拼接一个数组元素时，在 bootbox.js 的回调中完成时，该更改不会反映。

作品：

$scope.deleteA = function() {
    if (confirm("Really delete Item 3?")) {
      $scope.itemsA.splice(2, 1);
    }
}

不起作用：

$scope.deleteB = function() {
    bootbox.confirm("Really delete Item 3?", function(answer) {
      if (answer === true) {
        $scope.itemsB.splice(2, 1);
      }
    });
}

我主要想了解为什么。这对我来说比有一个花哨的解决方法重要得多。

I created a Plunker to show the effect

Answer 1

任何变化都发生在来自 Angular 外部世界的 Angular 范围变量上，不会让 Angular 摘要系统运行摘要循环以更新绑定。
在bootbox 回调角度不知道有什么变化，这就是为什么不更新视图。
要解决此问题，您需要使用$apply method 或$timeout service 手动启动摘要循环，如下所示

bootbox.confirm("Really delete Item 3?", function(answer) {
  if (answer === true) {
    $scope.$apply(function(){
        $scope.itemsB.splice(2, 1);
    });
  }
});

Answer 2

应用范围更改的安全方法是使用$timeout 服务。

bootbox.confirm("Really delete Item 3?", function(answer) {
  if (answer === true) {
    $timeout($scope.itemsB.splice(2, 1));
  }
});

因此您无需担心$digest 阶段，您的$apply 将是一个高调用堆栈，请查看AngularJS Wiki - Anti-Patterns 点-2。

不要做if (!$scope.$$phase) $scope.$apply()，这意味着你的 $scope.$apply() 在调用堆栈中不够高。