Angularjs 加载屏幕上的 ajax 请求 [英] Angularjs loading screen on ajax request
问题描述
使用 Angularjs,我需要显示加载屏幕(一个简单的微调器),直到 ajax 请求完成.请用代码片段提出任何想法.
与其设置作用域变量来指示数据加载状态,不如让一个指令为您做所有事情:
angular.module('directive.loading', []).directive('loading', ['$http' ,function ($http){返回 {限制:'A',链接:函数(范围、榆树、属性){scope.isLoading = 函数 () {返回 $http.pendingRequests.length >0;};scope.$watch(scope.isLoading, 函数 (v){如果(v){榆树.show();}别的{榆树.隐藏();}});}};}]);
有了这个指令,你需要做的就是给任何加载动画元素一个加载"属性:
<div class="loading-spiner-holder" 数据加载><div class="loading-spiner"><img src="..."/></div>
页面上可以有多个加载微调器.在哪里以及如何布置这些微调器取决于您,指令会自动为您打开/关闭它.
Using Angularjs , I need to show a loading screen (a simple spinner) until ajax request is complete. Please suggest any idea with a code snippet.
Instead of setting up a scope variable to indicate data loading status, it is better to have a directive does everything for you:
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();
}
});
}
};
}]);
With this directive, all you need to do is to give any loading animation element an 'loading' attribute:
<div class="loading-spiner-holder" data-loading ><div class="loading-spiner"><img src="..." /></div></div>
You can have multiple loading spinners on the page. where and how to layout those spinners is up to you and directive will simply turn it on/off for you automatically.
这篇关于Angularjs 加载屏幕上的 ajax 请求的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!