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

Question

我有一个控制器，我需要使用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 

我曾尝试逐步执行代码，但短了，以什么回事 - ，我相信我误解的事件在事件循环和其中角循环播放，它的发生顺序在这一切中的作用。

有人能够提供一个解释，说明为什么微调器设置为出现在承诺的方法中，而不是我设置的地方$scope.isLoadingContent？它实际上没有设置，而是在事件循环的消息队列中排队？

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

我相信我碰到一个解释来为这是怎么回事。非常感谢@jcford和@istrupin。

因此，在原始文章中缺少一点消息，触发承诺调用和微调更新的事件实际上基于一个$scope.$on("some-name", function(){...})事件 - 实际上是在当前控制器范围之外触发​​的单击事件。我相信这意味着美元消化周期不起作用，因为它通常会发生，因为事件起源发生在何处。因此，$on函数中的任何更新都不会像通常那样调用$ apply/$ digest，这意味着我必须专门进行该$摘要调用。

奇怪的是，现在我意识到在$q.all()之内，它必须调用$apply，因为在调试时，我看到了我期望的DOM更改。 FWIW。

tl; dr - 请拨打$digest。

Answer 1

尝试在分配$scope.isLoadingContent = true以强制摘要后添加$scope.$apply()。其他代码中可能会有一些内容不能立即应用。

正如一些评论指出的那样，这绝对是一种破解，并不是解决问题的最佳方式。也就是说，如果这确实起作用，您至少知道您的绑定设置正确，这将允许您进一步调试。既然你提到它，那么下一步就是看看什么是正常的摘要循环 - 例如用户角色之外的触发，正如用户JC Ford所建议的那样。

Answer 2

我通常使用isContentLoaded（与isLoading相反）。我首先不确定它，所以ng-show="!isContentLoaded"保证在第一次模板迭代时出现。

当所有被加载我设置isContentLoaded为true。

要调试的模板，你需要使用$超时 $timeout(function() { debugger; }) 这将停止执行代码之后第一摘要周期，所有的$范围变量值反映到DOM。

Answer 3

这两个答案的组合将在这里做的伎俩。使用

$scope.$evalAsync() 

这将结合范围适用与超时在一个不错的方式。 $ evalAsync中的代码将包含在当前摘要中，或者等到当前摘要结束并使用您的更改启动新的摘要。

即

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