javascript - 如何在执行过程中使 Angular 刷新屏幕

Question

我在第三个页面中有一些 Angular html。

一切工作正常，代码工作正常，指令工作正常(除了“ng-show”，它永远不会工作，但这在这里并不重要)。

但是我有一个在按钮单击(使用 ng-click)中运行的繁重代码。在执行过程中，一切都卡住了，好吧，这是预料之中的。

但是我非常希望在执行过程中出现一个“img”，但是在代码期间似乎没有任何更新(所有内容在代码之后都完美更新，但在代码期间没有更新) 。

如何在“ng-click”中“执行”代码期间“刷新” Angular html？

我尝试过“$scope.apply()”和“$scope.digest()”，但两者都会在控制台中导致一些奇怪的错误......

<小时/>

编辑

感谢以下答案:错误确实是因为“应用/摘要”已经在进行中。通过使用所示的异步方法，我可以毫无问题地使用“apply”。

Answer 1

JavaScript 在浏览器环境中的工作方式是，执行一个 JavaScript block 直至其完成，无论您使用 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 来说没有什么不同，处理大量数据不会更新你的 UI。

要处理大量数据，您需要拆分工作并使用任何类型的“ future ”/“ promise ”/“延迟”技术 - 对于此示例:

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 延迟完成您的工作，当您的工作完成时，删除图像并将数据设置为$范围。