javascript - 如何在内存中 AngularJS 处理期间显示图像

Question

我是JS新手，请原谅我的无知。我有一个 AngularJS 应用程序，其中一个页面在内存中保存数据。该页面使用户能够过滤数据，然后将其填充到 ng-grid 表中。当 JS 处理内存数据时，如何显示图像(例如旋转器)？这是我尝试过的:

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;

};

Answer 1

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

问题是这会锁定 UI 线程，并且在完成之前不会运行 $digest 循环。这将产生永远不会实际显示加载指示器的效果，因为它会在 $digest 运行之前设置为 true，然后设置为 false。

最终效果是屏幕会卡住一会儿，然后看起来就像什么也没发生一样。

您可以使用 $timeout 服务异步运行操作:

$scope.loadingTable = function() {

    $scope.loading = true;

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

    function loadTable() {

    };
};

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