Angular 1.x - $ scope的順序是怎麼回事？

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

來源

2017-09-07 mche

請提供[MCVE] –

你能一次嘗試使用NG-如果不是NG-表演。 – Ved

你能展示如何創建承諾嗎？ –

嘗試在分配$scope.isLoadingContent = true以強制摘要後添加$scope.$apply()。其他代碼中可能會有一些內容不能立即應用。

正如一些評論指出的那樣，這絕對是一種破解，並不是解決問題的最佳方式。也就是說，如果這確實起作用，您至少知道您的綁定設置正確，這將允許您進一步調試。既然你提到它，那麼下一步就是看看什麼是正常的摘要循環 - 例如用戶角色之外的觸發，正如用戶JC Ford所建議的那樣。

來源

2017-09-07 18:55:05 istrupin

爲什麼要在這裏強制執行$ digest循環。一切都以角度來看。 – Ved

'拋出$ scope。$ apply（）'是definitly不會幫助lol;） –

謝謝！這工作。 – mche

-1

我通常使用isContentLoaded（與isLoading相反）。我首先不確定它，所以ng-show="!isContentLoaded"保證在第一次模板迭代時出現。

當所有被加載我設置isContentLoaded爲true。

要調試的模板，你需要使用$超時 $timeout(function() { debugger; }) 這將停止執行代碼之後第一摘要週期，所有的$範圍變量值反映到DOM。

來源

2017-09-07 18:58:08

這兩個答案的組合將在這裏做的伎倆。使用

$scope.$evalAsync()

這將結合範圍適用與超時在一個不錯的方式。 $ evalAsync中的代碼將包含在當前摘要中，或者等到當前摘要結束並使用您的更改啓動新的摘要。

即

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

來源

2017-09-07 19:16:58 Mattkwish

應該不需要在$ q.then內執行'$ evalAsync'。當我談論$超時時，我只是爲了調試目的。 –

當然，如果您需要立即更新'then'函數中的視圖。 – Mattkwish

你是說在沒有$ evalAsync的情況下，執行回調後沒有摘要循環嗎？ –

Angular 1.x - $ scope的順序是怎麼回事？

回答

相關問題