Javascript 在AngularJS中添加进度圈的适当方法

我正在使用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;
            });
        });
     });
}

在控制器中：

$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`

//当“$scope.loading”变量为“true”时显示loading.gif`

在接收和处理所有数据后，在控制器集中

$scope.doneLoading=true

在您的视图中，使用

ng if='显示动画图像！执行读取“

并隐藏具有类似否定条件的其他组件

或者，您也可以在

$http.pendingRequests

上安装一个由手表控制的全局throbber，但不幸的是，文档中提到的pendingRequests“主要用于调试目的。”

---

另外，从可用性角度来看，我更希望仅在视图中当前实际加载的部分显示一个跳动器。

实际请求代码在哪里？只有在加载页面时，页面加载时，我的gif进度圈图像才移动。图像显示数据加载时。如果要显示页面加载的图像，也可以将

$scope.load=true

scope.getData函数的顶部：）