ajax请求上的Angularjs加载屏幕
ajax请求上的Angularjs加载屏幕
提问于 2013-06-17 17:20:33
使用Angularjs，我需要显示一个加载屏幕(一个简单的微调器)，直到ajax请求完成。请使用代码片段提出任何建议。
回答 7
Stack Overflow用户
回答已采纳
发布于 2013-10-28 14:04:21
与其设置一个作用域变量来指示数据加载状态，不如让一个指令为您完成所有工作：
angular.module('directive.loading', [])
.directive('loading', ['$http' ,function ($http)
{
return {
restrict: 'A',
link: function (scope, elm, attrs)
{
scope.isLoading = function () {
return $http.pendingRequests.length > 0;
};
scope.$watch(scope.isLoading, function (v)
{
if(v){
elm.show();
}else{
elm.hide();
}
});
}
};
}]);有了这个指令，你需要做的就是给任何正在加载的动画元素一个' loading‘属性：
<div class="loading-spiner-holder" data-loading ><div class="loading-spiner"><img src="..." /></div></div>您可以在页面上有多个加载微调器。在哪里以及如何布局这些微调器由你决定，directive会自动为你打开/关闭它。
Stack Overflow用户
发布于 2014-04-04 11:26:35
为此，我使用ngProgress。
一旦你在ngProgress中包含了脚本/css文件，就将‘css’添加到你的依赖项中。一旦你这样做了，你就可以设置类似这样的东西，它将在检测到路由更改时触发。
angular.module('app').run(function($rootScope, ngProgress) {
$rootScope.$on('$routeChangeStart', function(ev,data) {
ngProgress.start();
});
$rootScope.$on('$routeChangeSuccess', function(ev,data) {
ngProgress.complete();
});
});对于AJAX请求，您可以这样做：
$scope.getLatest = function () {
ngProgress.start();
$http.get('/latest-goodies')
.success(function(data,status) {
$scope.latest = data;
ngProgress.complete();
})
.error(function(data,status) {
ngProgress.complete();
});
};只需记住在执行此操作之前将'ngProgress‘添加到控制器依赖项中。如果您正在处理多个AJAX请求，那么在调用'ngProgress.complete();‘之前，在主应用程序范围内使用一个增量变量来跟踪AJAX请求何时完成。
Stack Overflow用户
发布于 2014-12-12 13:53:19
使用pendingRequests是不正确的，因为正如Angular文档中所提到的，此属性主要用于调试目的。
我建议使用拦截器来了解是否有任何活动的异步调用。
module.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push(function ($q, $rootScope) {
if ($rootScope.activeCalls == undefined) {
$rootScope.activeCalls = 0;
}
return {
request: function (config) {
$rootScope.activeCalls += 1;
return config;
},
requestError: function (rejection) {
$rootScope.activeCalls -= 1;
return rejection;
},
response: function (response) {
$rootScope.activeCalls -= 1;
return response;
},
responseError: function (rejection) {
$rootScope.activeCalls -= 1;
return rejection;
}
};
});
}]);然后通过$watch检查指令中的activeCalls是否为零。
module.directive('loadingSpinner', function ($http) {
return {
restrict: 'A',
replace: true,
template: '<div class="loader unixloader" data-initialize="loader" data-delay="500"></div>',
link: function (scope, element, attrs) {
scope.$watch('activeCalls', function (newVal, oldVal) {
if (newVal == 0) {
$(element).hide();
}
else {
$(element).show();
}
});
}
};
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17144180
复制相关文章
相似问题