![loading]( "loading")
本文介绍了尝试在我进行 ajax 调用时使用 angular 添加加载轮?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在我们进行 ajax 调用时实现加载轮指令，因此在响应时间内我想显示加载时，使用下面的代码，我没有看到任何错误，也没有加载轮.
有没有更好的方法来使用 angularJs 实现加载轮?
或
下面的代码有什么问题?
main.html
<ul style="list-style: none;"><li ng-repeat="message in event | limitTo:1000" ng-class="{lastItem: $last}"><span>{{message.value}}</span></li>
loading.js
angular.module('App', []).directive('加载', 函数 () {返回 {限制:'E'，替换:真，模板:'<div class="loading"><img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" width="20" height="20"/>正在加载...</div>',链接:函数(范围、元素、属性){scope.$watch('loading', function (val) {如果(值)$(元素).show();别的$(元素).隐藏();});}}})
ctrl.js
$scope.searchServerFile = function() {控制台日志($scope.vm.search)；if ($scope.vm.search === undefined || $scope.vm.search === null) {toastr.warning('搜索关键字只能包含 a-z、A-Z、0-9 或空格字符.');} 别的 {$scope.loading = true;searchFactory.getServerSearch($scope.vm.search, searchEnv).then(function(response) {$scope.modalInstance.rendered.then(function() {$rootScope.$broadcast('displaySearchResults', {messageObj: response.data});$scope.loading = false;});}}
解决方案
您可以使用指令来跟踪 ajax 请求并在一个地方显示/隐藏加载符号，而不是显式地显示/隐藏每个服务调用.
下面是类似的实现
将加载图标容器放在index.html
<div class="loading-icon"><img src="https://i.stack.imgur.com/oQ0tF.gif" width="28px" height="28px" alt="正在加载..."/>
造型
.loading-icon-container {位置:固定；顶部:0；左:0；宽度:100%；高度:100%；背景:黑色；z-索引:99999；不透明度:0.6；}.loading-icon {位置:绝对；顶部:50%；左:50%；宽度:28px；高度:28px；填充:5px；边框:1px纯黑色；}
实现loading指令
return {限制:'A'，链接:函数(范围，元素，属性){范围.$watch(function() {返回 $http.pendingRequests.length >0;}, 函数(hasPending){如果(hasPending){element[0].style.display = '';} 别的 {element[0].style.display = 'none';}});}}
演示
angular.module('myApp', []);有角的.module('myApp').controller('MyController', MyController).directive('加载', 加载).factory('serviceFactory', serviceFactory);MyController.$inject = ['$scope', 'serviceFactory'];函数 MyController($scope, serviceFactory) {$scope.serviceCall = function() {var reqObj = {url: 'https://reqres.in/api/users?delay=3/photos',方法:'获取'}服务工厂.serviceCall(reqObj).then(函数(数据){$scope.responseText = data.data;控制台日志(数据)；});};}loading.$inject = ['$http'];函数加载($http){返回 {限制:'A'，链接:函数(范围，元素，属性){范围.$watch(function() {返回 $http.pendingRequests.length >0;}, 函数(hasPending){如果(hasPending){element[0].style.display = '';} 别的 {element[0].style.display = 'none';}});}};}serviceFactory.$inject = ['$http'];功能服务工厂($http){var obj = {};obj.serviceCall = 函数(reqObj){返回 $http(reqObj).then(function(success) {返回成功数据；});};返回对象；}
.loading-icon-container {位置:固定；顶部:0；左:0；宽度:100%；高度:100%；背景:黑色；z-索引:99999；不透明度:0.6；}.loading-icon {位置:绝对；顶部:50%；左:50%；宽度:28px；高度:28px；填充:5px；边框:1px纯黑色；}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script><div ng-app="myApp" ng-controller="MyController"><button ng-click="serviceCall()">服务调用</button><!-- 加载图标--><div class="loading-icon-container" loading><div class="loading-icon"><img src="https://i.stack.imgur.com/oQ0tF.gif" width="28px" height="28px" alt="正在加载..."/>
<!--<div ng-bind="responseText|json"></div>-->
I am trying to implement loading wheel directive when we make ajax call so during the response time i want to display loading wheen, With below code i do not see any error neither the loading wheel.
Is there any better way to implement loading wheel using angularJs ?
or
What is implemented wrong in below code ?
main.html
<loading></loading>
<ul style="list-style: none;">
<li ng-repeat="message in event | limitTo:1000" ng-class="{lastItem: $last}"><span>{{message.value}}</span></li>
</ul>
loading.js
angular.module('App', [])
.directive('loading', function () {
return {
restrict: 'E',
replace:true,
template: '<div class="loading"><img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" width="20" height="20" />LOADING...</div>',
link: function (scope, element, attr) {
scope.$watch('loading', function (val) {
if (val)
$(element).show();
else
$(element).hide();
});
}
}
})
ctrl.js
$scope.searchServerFile = function() {
console.log($scope.vm.search);
if ($scope.vm.search === undefined || $scope.vm.search === null) {
toastr.warning('A search keyword must only contain a-z, A-Z, 0-9, or space characters.');
} else {
$scope.loading = true;
searchFactory.getServerSearch($scope.vm.search, searchEnv).then(function(response) {
$scope.modalInstance.rendered.then(function() {
$rootScope.$broadcast('displaySearchResults', {
messageObj: response.data
});
$scope.loading = false;
});
}
}
解决方案
Instead of showing/hiding for each service call explicitly, you can use a directive to track the ajax request and show/hide the loading symbol at one place.
Below is the similar implementation
Place the loading icon container in index.html
<div class="loading-icon-container" loading>
<div class="loading-icon">
<img src="https://i.stack.imgur.com/oQ0tF.gif" width="28px" height="28px" alt="Loading..." />
</div>
</div>
Styling
.loading-icon-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
z-index: 99999;
opacity: 0.6;
}
.loading-icon {
position: absolute;
top: 50%;
left: 50%;
width: 28px;
height: 28px;
padding: 5px;
border: 1px solid black;
}
Implement loading directive
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.$watch(function() {
return $http.pendingRequests.length > 0;
}, function(hasPending) {
if (hasPending) {
element[0].style.display = '';
} else {
element[0].style.display = 'none';
}
});
}
}
Demo
angular
.module('myApp', []);
angular
.module('myApp')
.controller('MyController', MyController)
.directive('loading', loading)
.factory('serviceFactory', serviceFactory);
MyController.$inject = ['$scope', 'serviceFactory'];
function MyController($scope, serviceFactory) {
$scope.serviceCall = function() {
var reqObj = {
url: 'https://reqres.in/api/users?delay=3/photos',
method: 'GET'
}
serviceFactory
.serviceCall(reqObj)
.then(function(data) {
$scope.responseText = data.data;
console.log(data);
});
};
}
loading.$inject = ['$http'];
function loading($http) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.$watch(function() {
return $http.pendingRequests.length > 0;
}, function(hasPending) {
if (hasPending) {
element[0].style.display = '';
} else {
element[0].style.display = 'none';
}
});
}
};
}
serviceFactory.$inject = ['$http'];
function serviceFactory($http) {
var obj = {};
obj.serviceCall = function(reqObj) {
return $http(reqObj).then(function(success) {
return success.data;
});
};
return obj;
}
.loading-icon-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
z-index: 99999;
opacity: 0.6;
}
.loading-icon {
position: absolute;
top: 50%;
left: 50%;
width: 28px;
height: 28px;
padding: 5px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<button ng-click="serviceCall()">Servie call</button>
<!-- loading icon -->
<div class="loading-icon-container" loading>
<div class="loading-icon"><img src="https://i.stack.imgur.com/oQ0tF.gif" width="28px" height="28px" alt="Loading..." />
</div>
</div>
<!--<div ng-bind="responseText|json">
</div>-->
</div>
这篇关于尝试在我进行 ajax 调用时使用 angular 添加加载轮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！