我正在使用AngularJS的$http服务来进行Ajax请求。
如何在Ajax请求执行时显示旋转GIF(或另一种类型的忙碌指示器)?
我在AngularJS文档中没有看到类似ajaxstartevent的东西。
我正在使用AngularJS的$http服务来进行Ajax请求。
如何在Ajax请求执行时显示旋转GIF(或另一种类型的忙碌指示器)?
我在AngularJS文档中没有看到类似ajaxstartevent的东西。
当前回答
这对我来说很管用:
HTML:
<div id="loader" class="ng-hide" ng-show="req.$$state.pending">
<img class="ajax-loader"
width="200"
height="200"
src="/images/spinner.gif" />
</div>
角:
$scope.req = $http.get("/admin/view/"+id).success(function(data) {
$scope.data = data;
});
当$http返回的承诺是未决的,ng-show将评估它是“真实的”。一旦承诺被解决,这将自动更新…这正是我们想要的。
其他回答
简单的方法没有拦截器或jQuery
这是一种显示旋转器的简单方法,不需要第三方库、拦截器或jQuery。
在控制器中设置和重置标志位。
function starting() {
//ADD SPINNER
vm.starting = true;
$http.get(url)
.then(function onSuccess(response) {
vm.data = response.data;
}).catch(function onReject(errorResponse) {
console.log(errorResponse.status);
}).finally(function() {
//REMOVE SPINNER
vm.starting = false;
});
};
在HTML中,使用标记:
<div ng-show="vm.starting">
<img ng-src="spinnerURL" />
</div>
<div ng-hide="vm.starting">
<p>{{vm.data}}</p>
</div>
vm。当XHR开始时设置为true,当XHR完成时清除。
这是我的解决方案,我觉得比其他贴在这里的要容易得多。虽然不知道它有多“漂亮”,但它解决了我所有的问题
我有一个css样式叫做loading
.loading { display: none; }
加载div的html可以是任何东西,但我使用了一些FontAwesome图标和旋转方法:
<div style="text-align:center" ng-class="{ 'loading': !loading }">
<br />
<h1><i class="fa fa-refresh fa-spin"></i> Loading data</h1>
</div>
在你想要隐藏的元素上,你只需这样写:
<something ng-class="{ 'loading': loading }" class="loading"></something>
在函数中,我把这个设为load。
(function (angular) {
function MainController($scope) {
$scope.loading = true
我使用的是SignalR,所以在hubProxy.client.allLocks函数(当它完成了通过锁),我只是把
$scope.loading = false
$scope.$apply();
当页面加载时,这也隐藏了{{someField}},因为我在load上设置了加载类,AngularJS随后删除了它。
下面的方法将记录所有的请求,并且只在所有请求完成时隐藏:
app.factory('httpRequestInterceptor', function(LoadingService, requestCount) { return { request: function(config) { if (!config.headers.disableLoading) { requestCount.increase(); LoadingService.show(); } return config; } }; }).factory('httpResponseInterceptor', function(LoadingService, $timeout, error, $q, requestCount) { function waitAndHide() { $timeout(function() { if (requestCount.get() === 0){ LoadingService.hide(); } else{ waitAndHide(); } }, 300); } return { response: function(config) { requestCount.descrease(); if (requestCount.get() === 0) { waitAndHide(); } return config; }, responseError: function(config) { requestCount.descrease(); if (requestCount.get() === 0) { waitAndHide(); } var deferred = $q.defer(); error.show(config.data, function() { deferred.reject(config); }); return deferred.promise; } }; }).factory('requestCount', function() { var count = 0; return { increase: function() { count++; }, descrease: function() { if (count === 0) return; count--; }, get: function() { return count; } }; })
如果你想为每个HTTP请求调用显示加载器,那么你可以使用angular interceptor来管理HTTP请求调用。
下面是一个示例代码
<body data-ng-app="myApp">
<div class="loader">
<div id="loader"></div>
</div>
<script>
var app = angular.module("myApp", []);
app.factory('httpRequestInterceptor', ['$rootScope', '$location', function ($rootScope, $location) {
return {
request: function ($config) {
$('.loader').show();
return $config;
},
response: function ($config) {
$('.loader').hide();
return $config;
},
responseError: function (response) {
return response;
}
};
}]);
app.config(['$stateProvider', '$urlRouterProvider', '$httpProvider',
function ($stateProvider, $urlRouterProvider, $httpProvider) {
$httpProvider.interceptors.push('httpRequestInterceptor');
}]);
</script>
</body>
下面是一个使用指令和ng-hide的版本。
这将显示所有通过angular的$http服务调用的加载器。
在模板中:
<div class="装载机" </div>
指令:
angular.module('app')
.directive('loading', ['$http', function ($http) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
scope.isLoading = function () {
return $http.pendingRequests.length > 0;
};
scope.$watch(scope.isLoading, function (value) {
if (value) {
element.removeClass('ng-hide');
} else {
element.addClass('ng-hide');
}
});
}
};
}]);
通过在元素上使用ng-hide类,可以避免使用jquery。
自定义:添加拦截器
如果你创建了一个加载拦截器,你可以根据条件显示/隐藏加载器。
指令:
var loadingDirective = function ($rootScope) {
return function ($scope, element, attrs) {
$scope.$on("loader_show", function () {
return element.removeClass('ng-hide');
});
return $scope.$on("loader_hide", function () {
return element.addClass('ng-hide');
});
};
};
拦截器:
例如:当响应时不显示旋转器。背景=== true; 拦截请求和/或响应设置$rootScope.$broadcast("loader_show");或rootScope。广播美元(“loader_hide”);
关于编写拦截器的更多信息