javascript - Angular 1.x - $scope 的顺序是怎么回事？

Question

我有一个 Controller ，我需要在其中使用 ajax 加载内容。在加载时，我希望在过渡期间出现一个微调器。代码如下所示:

<i class="fa fa-2x fa-spin fa-spinner" ng-show="isLoadingContent"></i>

以及对应的js:

$scope.isLoadingContent = true;
$q.all(promises).then(function (values) {
    $scope.isLoadingContent = false;
    // more code - display returned data

但是，当我单步执行代码时，微调器的 UI 没有出现在我期望它出现的位置/时间。

$scope.isLoadingContent = true;
debugger; // the spinner does not appear on the UI
$q.all(promises).then(function (values) {
    debugger; // the spinner finally does appear in the UI at this point
    $scope.isLoadingContent = false;
    // more code - display returned data

我已尝试单步执行代码，但对发生的事情一头雾水—— 而且我确信我误解了事件循环中发生的事件的顺序以及 Angular 循环在所有这一切中发挥的作用。

是否有人能够解释为什么将微调器设置为出现在 promise 的方法中，而不是我设置 $scope.isLoadingContent 的位置？它实际上并没有设置，而是在事件循环的消息队列中排队？

------------ 编辑------------

我相信我遇到了关于发生了什么的解释。很大程度上要感谢@jcford 和@istrupin。

所以在原始帖子中遗漏了一点花絮，触发 promise 调用的事件和微调器更新实际上是基于 $scope.$on("some-name", function(){... }) 事件 - 实际上是在当前 Controller 范围之外触发​​的点击事件。我相信这意味着 $digest 循环不能像通常那样工作，因为事件起源是在哪里触发的。因此，$on 函数中的任何更新都不会像通常那样调用 $apply/$digest，这意味着我必须专门进行 $digest 调用。

奇怪的是，我现在意识到在 $q.all() 中，它必须调用 $apply，因为在调试时，我看到了 DOM 的变化，我早有预料。 Fwiw.

tl;dr - 调用 $digest。

Answer 1

这两个答案的组合就可以解决问题。使用

$scope.$evalAsync()

这将以一种很好的方式将范围应用与超时结合起来。 $evalAsync 中的代码将包含在当前摘要中，或者等到当前摘要结束并开始包含您的更改的新摘要。

即

$q.all(promises).then(function (values) {
    $scope.$evalAsync($scope.isLoadingContent = false);
});