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

问题描述：

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

所以我有这样的东西，我的网页已经加载，但我的表（填充ng-repeat）没有。加载表格需要几秒钟的时间。虽然表中加载我想补充进度圈这样的：

enter image description here

什么是适当的方式做到这一点的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; 
      }); 
     }); 
    }); 
}

实际请求代码在哪里？ – dfsq 2014-09-30 08:38:39

答

在控制器：

$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

在View：

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

我的GIF进度圆形图像在页面加载时仅在加载时才移动。 – 2014-09-30 09:09:43

图像显示数据何时加载。如果你想显示页面加载的图像，你也可以把'$ scope.loading = true;'$ scope.getData'函数的顶部:) – 2014-09-30 09:11:48

答

在您的控制器设置$scope.doneLoading = true接收和处理后的所有数据。

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

另外，你也可以有一个由$http.pendingRequests上的手表控制的全局拍子 - 但不幸的是，文档中有关于pendingRequests的说法“这主要是为了用于调试目的”。

另外从可用性视图中，我宁愿只显示实际上正在加载视图的那些部分的throbber。

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

相关推荐