如何在執行過程中制作角度刷新屏幕

Question

我在三分之一的頁面中有一點角html。

一切正常，代碼正常，指令正常（“ ng-show”除外，該方法永遠無效，但是在此無關緊要）。

但是我有一個繁重的代碼，可以在按鈕單擊（使用ng-click ）中運行。 在執行過程中，所有內容都會凍結，這是可以預期的。

但是我非常希望在執行過程中出現一個“ img”，但是似乎在代碼執行過程中沒有任何更新（在代碼執行之后，所有內容都完美地更新了，但是在代碼執行期間卻沒有更新）。

在“ ng-click”中執行代碼期間，如何“刷新”角度html？

我已經嘗試過“ $ scope.apply（）”和“ $ scope.digest（）”，但是兩者都會在控制台中引起一些奇怪的錯誤。

---

編輯

由於以下答案：錯誤確實是因為“應用/摘要”已在進行中。 通過使用所示的異步方法，我可以毫無問題地使用“應用”。

Answer 1

在圖像上進行ng-show怎么樣？ 您可以使用一個div來占據要顯示圖像的整個部分，

<div ng-show="loading" class="some-class-to-display-image"></div> 

然后在您的js $scope.loading = true; 在處理/撥打電話等過程中，可以使用promise並在請求中使用.finally()並設置$scope.loading = false; 停止動畫。

Answer 2

除非您遇到“ $ digest已經進行中”錯誤，因為您一次只能運行一個摘要循環，否則應該在$ scope.apply（）中包裝要首先執行的代碼。

如果是這種情況，您可以嘗試在$ timeout或$ evalAsync（Angular v1.2.x及以上）中顯示加載圖像后包裝要執行的代碼，以確保2個摘要周期不會沖突，即

    $scope.$apply(function () {
        //display loading image code
    });
    //Other code

要么

    //display loading image code
    $scope.$evalAsync(function () {
        //Other code
    });

Answer 3

JavaScript在瀏覽器環境中的工作方式是執行一塊JavaScript直到完成為止，無論您使用AngularJS還是普通JavaScript，瀏覽器都不會呈現中間結果。

例

假設您對10.000個數據條目進行了繁重的操作，並希望顯示進度條：

startButton.onclick = function onStartClick() {
  var progressbar = document.getElementById('progressbar');
  progressbar.style.width = "0";

  // process 100000 entries, update progress bar between
  for (var n = 0; n < 100000; y++) {
    doSomethingWithEntryNumber(n);
    progressbar.style.width = (n / 100000) + "%";
  }
}

它不會按預期更新瀏覽器中的progressbar div ，但會凍結瀏覽器，直到onDivClick完成。 這對於AngularJS來說沒有什么不同，在AngularJS中處理大量數據不會更新您的UI。

要處理大量數據，您需要拆分工作並使用任何類型的“未來” /“承諾” /“延遲”技術-對於此示例：

startButton.onclick = function onStartClick() {
  var progressbar = document.getElementById('progressbar');
  progressbar.style.width = "0";

  // process 100000 entries in 1000 entry batches, update progress bar between
  function processBatch(batch) {
    for (var i = 0; i < 1000; i++) {
      doSomethingWithEntryNumber(batch*1000 + i);
    }
    // update progressbar
    progressbar.style.width = (batch / 1000) + "%";
    if (batch < 99) {
      // continue work after browser has updated UI
      setTimeout(processBatch.bind(this, batch + 1), 10);
    }
  }
  processBatch(0);
}

這樣，瀏覽器可以呈現UI更改，用戶可以滾動等，同時您仍然可以處理100000個數據條目。

關於“在處理過程中顯示圖像”，您將顯示圖像，然后setTimeout延遲您的工作，當您完成工作后，刪除圖像並將數據設置為$scope 。

Answer 4

您無法在執行過程中刷新HTML，因為Web頁面是單線程的，這意味着當CPU正在計算時，無法執行其他任何操作。 （從技術上講，網絡工作者可以幫助派生多個線程，但實際上，您不需要這樣做）。

因此，您要單擊的就是說，啟用一個圖像，然后等待angular用該圖像更新DOM，然后運行繁重的代碼。

要實現這一點，您需要使用$timeout服務，方法是：

$scope.onClick = function() {
  // Set the model to display an image
  $scope.displayImage = true;
  // Wait for angular to digest the current cycle and update the DOM
  $timeout(function() {
    // Do heavy stuff, and at the bottom of the code update the model to hide the image
    $scope.doHeavyStuff();
    $scope.displayImage = false;
  });
}

在您的HTML中，您只需要

<img ng-show = "displayImage" src = "some_url">
<div ng-hide = "displayImage"> Heavy stuff done :) </div>

現在，如果您在此步驟上遇到ng-show問題，請打開另一個問題。