如何在内存中显示图像AngularJS处理

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

的HTML：

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

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

的JS：

$scope.loadingTable = function() { 

    $scope.loading = true; 

    loadTable(); 

    function loadTable() { 

    }; 

    $scope.loading = false; 

};

来源

2014-06-13 kimli

您需要将加载设置为false后，在可装入函数内数据已被设置。 Javascript是异步的。 –

@ BenFelda - 默认情况下，Javascript不是异步的。它* IS *是单线程的，所以除非你明确地异步执行操作，否则你将会锁定UI。 – Josh

即使我在loadTable函数中将加载设置为false，图像也不会出现。当我注释加载= false时，直到数据已经被处理和显示，图像才会显示。 – kimli

我不能看到整个的例子，但我的猜测是，你正在执行计算在该函数内同步绑定操作。

问题是这会锁定UI线程，直到完成后才会运行$ digest循环。这会产生从未真正显示加载指示符的效果，因为它将在$digest运行之前设置为true，然后再设置为false。

最终效果是屏幕会冻结一下，然后显示为什么也没有发生。

可以asyncronously使用$timeout服务运行操作：

$scope.loadingTable = function() { 

    $scope.loading = true; 

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

    function loadTable() { 

    }; 
};

下面是这个概念的一个简单的演示：http://jsfiddle.net/jwcarroll/z7838/

来源

2014-06-13 15:38:54 Josh

如何在内存中显示图像AngularJS处理

回答

相关问题