我正在使用AngularJS的$http服务来进行Ajax请求。
如何在Ajax请求执行时显示旋转GIF(或另一种类型的忙碌指示器)?
我在AngularJS文档中没有看到类似ajaxstartevent的东西。
我正在使用AngularJS的$http服务来进行Ajax请求。
如何在Ajax请求执行时显示旋转GIF(或另一种类型的忙碌指示器)?
我在AngularJS文档中没有看到类似ajaxstartevent的东西。
当前回答
这是添加旋转器最简单的方法,我猜:-
您可以将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的正确位置添加这个
其他回答
下面是一个使用指令和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”);
关于编写拦截器的更多信息
对于页面加载和模态,最简单的方法是使用ng-show指令并使用一个作用域数据变量。喜欢的东西:
ng-show="angular.isUndefined(scope.data.someObject)".
在这里,当someObject未定义时,旋转器将显示。一旦服务返回数据并填充someObject,微调器将返回其隐藏状态。
简单的方法没有拦截器或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完成时清除。
刚刚发现了angular-busy指令,它显示了一个依赖于某些异步调用的小加载器。
例如,如果你必须创建一个GET,在$作用域中引用承诺,
$scope.req = $http.get('http://google.fr');
像这样称呼它:
<div cg-busy="req"></div>
这是GitHub。
你也可以使用bower安装它(别忘了更新你的项目依赖项):
bower install angular-busy --save
如果我们知道DRY的概念,那么所有的答案都是复杂的,或者需要在每个请求上设置一些变量,这是非常错误的做法。这里是一个简单的拦截器的例子,当ajax启动时,我将鼠标设置为等待,当ajax结束时设置为自动。
$httpProvider.interceptors.push(function($document) {
return {
'request': function(config) {
// here ajax start
// here we can for example add some class or show somethin
$document.find("body").css("cursor","wait");
return config;
},
'response': function(response) {
// here ajax ends
//here we should remove classes added on request start
$document.find("body").css("cursor","auto");
return response;
}
};
});
代码必须添加到应用程序配置app.config中。我展示了如何改变鼠标加载状态,但在那里,它是可以显示/隐藏任何加载器内容,或添加,删除一些css类显示加载器。
拦截器将在每次ajax调用上运行,因此不需要创建特殊的布尔变量($scope. js)。加载=true/false等)在每个HTTP调用。