如何使屏幕在执行过程中进行角度刷新

How to make angular refresh screen in the middle of execution

本文关键字：刷新 过程中 何使 屏幕 执行      更新时间：2023-09-26

我在第三方的页面中有一个有角度的html。

一切都很好，代码也很好，指令也很好（除了"ng-show"，它从来都不起作用，但这在这里无关紧要）。

但我有一个沉重的代码，它在点击按钮时运行（使用ng-click）。在执行过程中，一切都冻结了，好吧，这是意料之中的事。

但我非常希望在执行过程中出现一个"img"，但在代码执行过程中似乎什么都没有更新（所有内容都在代码执行后完美更新，但在代码执行期间没有更新）。

如何在"ng-click"中执行代码的过程中"刷新"angular html？

我试过"$scope.apply（）"answers"$scopy.digital（）"，但两者都会在控制台中导致一些奇怪的错误。。。。

编辑

感谢以下回答：这些错误确实是因为"应用/摘要"已经在进行中。通过使用所示的非对称方法，我可以毫无问题地使用"应用"。

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) + "%";
  }
}

它不会按照预期更新浏览器中的进度条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。

您不能在执行过程中刷新HTML，因为它是单线程的网页，这意味着当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有问题，请打开另一个问题。

在图像上进行ng显示怎么样？您可以使用一个div，它占据了您希望用显示图像的整个部分

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

然后在你的js中，在你处理/打电话等时打开$scope.loading = true;。你可以使用promise，在你的请求中使用.finally()，并设置$scope.loading = false;来停止动画。

将要首先执行的代码封装在$scope.apply（）中应该可以工作，除非您收到"$digest already in progress"错误，因为一次只能运行一个摘要循环。

如果是这种情况，您可以尝试在$timeout或$evalAsync（Angular v1.2.x&above）中显示加载图像后包装要执行的代码，这将确保两个摘要周期不会发生冲突，即

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

或

    //display loading image code
    $scope.$evalAsync(function () {
        //Other code
    });
相关文章：