Javascript 如何在内存AngularJS处理期间显示图像

我是JS新手，请原谅我的无知。我有一个AngularJS应用程序，它的页面在内存中保存数据。该页面使用户能够过滤数据，然后将这些数据填充到ng网格表中。在JS处理内存数据期间，您将如何显示图像（例如微调器）？这就是我尝试过的：

HTML：

<button ng-click="loadingTable()">View</button>
<img ng-show="loading" src="../images/loading.gif" />

<div class="gridStyle" ng-grid="gridOptions"></div>

---

我看不到您的整个示例，但我猜您正在该函数内同步执行一个计算绑定操作

问题是，这将锁定UI线程，并且在完成之前不会运行$digest循环。这将产生从未实际显示加载指示器的效果，因为在运行

$digest

之前，它将设置为

true

，然后设置为

false

净效果是屏幕将冻结一段时间，然后显示为未发生任何事情。

您可以使用

$timeout

服务异步运行操作：

$scope.loadingTable = function() {

    $scope.loading = true;

    $timeout(function(){
       loadTable();
    }).then(function(){
       $scope.loading = false;   
    });

    function loadTable() {

    };
};

---

下面是这个概念的一个简单演示：

设置数据后，需要在loadTable函数中将加载设置为false。Javascript是异步的。@BenFelda-Javascript在默认情况下不是异步的。但是，它是单线程的，因此除非显式异步执行操作，否则将锁定UI。即使我在loadTable函数中将loading设置为false，图像也不会出现。当I comment out loading=false时，直到数据已经被处理和显示，图像才会显示。@kimli-这是因为您很可能是同步处理的，因此没有$digest循环有机会运行以更新UI。您将需要使用$timeout服务异步排队操作，然后在操作完成时使用返回的承诺设置

load=false

。

$scope.loadingTable = function() {

    $scope.loading = true;

    $timeout(function(){
       loadTable();
    }).then(function(){
       $scope.loading = false;   
    });

    function loadTable() {

    };
};