尝试在ajax调用时使用angular添加加载轮? [英] trying to add loading wheel using angular when i make ajax call?
本文介绍了尝试在ajax调用时使用angular添加加载轮?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我们进行ajax调用时，我正在尝试实现加载轮指令，因此在响应时间内，我想显示加载提示，在下面的代码中，加载轮都看不到任何错误.
有没有更好的方法使用angularJs来实现装载轮?
或
以下代码中实现错误的地方是什么?
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;
});
}
}
解决方案
您可以使用指令来跟踪ajax请求并在一个位置显示/隐藏加载符号，而不是显式显示/隐藏每个服务调用./p>
下面是类似的实现
将加载图标容器放置在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>
样式
.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;
}
实施loading指令
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';
}
});
}
}
演示
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>
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添加加载轮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
