在AngularJS中添加进度循环的适当方法

Question

我正在使用AngularJS。我的控制器中有一个函数，它从服务器获取.json文件，处理数据并将其存储在$scope。
所以基本上这个功能在页面加载时需要最长的时间。

所以我有这样的东西，我的页面已经加载但是我的表（填充ng-repeat）却没有。加载表需要几秒钟。当表格加载时，我想添加这样的进度圈：

在AngularJS中执行此操作的适当方法是什么？

这是一个控制器演示：

 var serverData = $http.get('data/topCarObj.json');
 function sortCars(){
    angular.forEach($scope.tabArray, function(tab){
        serverData.success(function(data){
            angular.forEach(data, function(key){
                ....
                return myCarList;
            });
        });
     });
}

Answer 1

在控制器中：

$scope.getData = function() {    // wrap a data getting code in a function
        $scope.loading = true;     // define a variable that indicate the loading status   // true here
        $http.get('path_to_json').success(function (data) {   // get the data 
            $scope.loading = false;     // loading is finished so loading = false
        })
        .error(function (data, status) {
             $scope.loading = false;    // loading = false when there is a error
        });
}

$scope.getData();         // call the function to get data

在视图中：

<img src="loading.gif" ng-show="loading" /> // show the loading.gif when `$scope.loading` variable is `true`

Answer 2

在收到并处理完所有数据后，在控制器中设置$scope.doneLoading = true。

在您的视图中，动画图像显示为ng-if='!doneLoading'，并隐藏其他具有类似否定条件的组件。

另外，您还可以使用由$http.pendingRequests上的监视控制的全局悸动 - 但不幸的是，文档说明pendingRequests＆＃34;这主要用于调试目的。＆＃34 ;

同样从可用性视图中，我更倾向于仅在视图的实际当前正在加载的那些部分显示一个悸动。