我正在使用AngularJS的$http服务来进行Ajax请求。
如何在Ajax请求执行时显示旋转GIF(或另一种类型的忙碌指示器)?
我在AngularJS文档中没有看到类似ajaxstartevent的东西。
我正在使用AngularJS的$http服务来进行Ajax请求。
如何在Ajax请求执行时显示旋转GIF(或另一种类型的忙碌指示器)?
我在AngularJS文档中没有看到类似ajaxstartevent的东西。
当前回答
用下面的代码创建指令:
$scope.$watch($http.pendingRequests, toggleLoader);
function toggleLoader(status){
if(status.length){
element.addClass('active');
} else {
element.removeClass('active');
}
}
其他回答
你也可以尝试这样做:
创建指令:
myApp.directive('loader', function () {
return {
restrict: 'A',
scope: {cond: '=loader'},
template: '<span ng-if="isLoading()" class="soft"><span class="fa fa-refresh fa-spin"></span></span>',
link: function (scope) {
scope.isLoading = function() {
var ret = scope.cond === true || (
scope.cond &&
scope.cond.$$state &&
angular.isDefined(scope.cond.$$state.status) &&
scope.cond.$$state.status === 0
);
return ret;
}
}
};
});
然后向mainCtrl添加如下内容
// Return TRUE if some request is LOADING, else return FALSE
$scope.isLoading = function() {
return $http.pendingRequests.length > 0;
};
HTML可以是这样的:
<div class="buttons loader">
<span class="icon" loader="isLoading()"></span>
</div>
这是添加旋转器最简单的方法,我猜:-
您可以将ng-show与这些漂亮的旋转器中的任何一个的div标签一起使用 http://tobiasahlin.com/spinkit/{{这不是我的页面}}
然后你可以用这种逻辑
/ / ajax开始 美元scope.finderloader = true; http({美元 方法:“文章”, url: "你的url ", Data:{//你的数据 } })。然后(函数mysucceeded (response) { 美元scope.finderloader = false; 美元scope.search = false; 美元的范围。myData = response.data.records; }); / / ajax结束 <div ng-show="finderloader" class=spinner></div> //在HTML的正确位置添加这个
分享来自@bulltorious的精彩答案的我的版本,更新到更新的angular构建(我使用了1.5.8版本的代码),还加入了@JMaylin的想法,使用计数器来健壮地处理多个并发请求,以及选择跳过显示小于最小毫秒数的请求动画:
var app = angular.module('myApp');
var BUSY_DELAY = 1000; // Will not show loading graphic until 1000ms have passed and we are still waiting for responses.
app.config(function ($httpProvider) {
$httpProvider.interceptors.push('busyHttpInterceptor');
})
.factory('busyHttpInterceptor', ['$q', '$timeout', function ($q, $timeout) {
var counter = 0;
return {
request: function (config) {
counter += 1;
$timeout(
function () {
if (counter !== 0) {
angular.element('#busy-overlay').show();
}
},
BUSY_DELAY);
return config;
},
response: function (response) {
counter -= 1;
if (counter === 0) {
angular.element('#busy-overlay').hide();
}
return response;
},
requestError: function (rejection) {
counter -= 1;
if (counter === 0) {
angular.element('#busy-overlay').hide();
}
return rejection;
},
responseError: function (rejection) {
counter -= 1;
if (counter === 0) {
angular.element('#busy-overlay').hide();
}
return rejection;
}
}
}]);
https://github.com/wongatech/angular-http-loader是一个很好的项目。
例如http://wongatech.github.io/angular-http-loader/
下面的代码显示了发生请求时的模板示例/loader.tpl.html。
<div ng-http-loader template="example/loader.tpl.html"></div>
如果你正在使用ngResource,对象的$resolved属性对加载器很有用:
对于资源,如下所示:
var User = $resource('/user/:id', {id:'@id'});
var user = User.get({id: 1})
你可以将加载器链接到资源对象的$resolved属性:
<div ng-hide="user.$resolved">Loading ...</div>