Angular js中的ajax請求未顯示加載程序
[英]Loader not being shown on ajax request in angular js
問題描述
由於我正在使用$ http使用ajax請求。 由於我在服務器上的操作需要時間，因此需要很長時間。 處理請求時，我需要顯示加載程序，但加載程序不顯示。 雖然我的代碼似乎正確。 我嘗試了其他方法，但是沒有用。
Index.html
<body ng-app="app">
<!-- loader, can be used on multiple pages-->
<div class="loading loader-quart" ng-show="isLoading"></div>
<!-- my logic -->
</body>
addCtrl.js
//method to get all the attributes and send to server using service
$scope.add = function () {
if ($scope.Option == 'newInstance')
$scope.singleObject.FK_Name = 'MetisEmptyTemplate';
$rootScope.isLoading = true;
var featuresList = websiteService.getUpdatedTree($scope.treeDataSource);
var formData = new Website("", $scope.singleObject.Name, $scope.singleObject.DisplayName, $scope.singleObject.Description, $scope.singleObject.State, "", $scope.singleObject.FK_Name, $scope.singleObject.Email, featuresList);
websiteService.addwebsite(formData);
$rootScope.isLoading = false;
}
websiteService.js
//service to add website
this.addwebsite = function (website) {
$http({
method: 'POST',
url: $rootScope.url + 'Add',
data: JSON.stringify(website),
contentType: 'application/json'
}).success(function (data) {
alert(data);
}).error(function (data, status, headers, config) {
//alert(data);
});
}
由於我將開始將isLoading設置為“ true”，然后在請求完成后將isLoading設置為“ false”。 代碼中的問題在哪里？
3 個解決方案
解決方案1
1 已采納 2016-10-13 11:27:20
您的websiteServices代碼將異步執行。 這意味着以上代碼將顯示加載程序，然后幾乎立即將其再次隱藏。
要在控制器中處理異步代碼，您必須從服務中返回一個Promise，並使用.then()將微調.then()的隱藏內容放入回調函數中。
服務：
this.addwebsite = function (website) {
var deferred = $q.defer();
$http({
method: 'POST',
url: $rootScope.url + 'Add',
data: JSON.stringify(website),
contentType: 'application/json'
}).success(function (data) {
alert(data);
deferred.resolve(data);
}).error(function (data, status, headers, config) {
//alert(data);
deferred.reject(data);
});
return deferred.promise
}
控制器：
websiteService.addwebsite(formData).then(function(){
$rootScope.isLoading = false
});
解決方案2
0 2016-10-13 11:26:49
this.insertMliveResponse = function(data){
var defer=$q.defer();
var requestURL='/mlive-portlet/rest/mliveResponseService/insertmLiveResponse';
httpRequest(requestURL,data).then(function(data){
defer.resolve(data.data);
},function(data){
defer.reject(data.data);
})
return defer.promise;
}
解決方案3
0 2016-10-13 11:31:41
如果您提出要求，我認為show hide loader的最好方法是interceptor
在我的代碼段中，我正在使用加載程序服務來激活/停用加載程序
例如：
// http.config.js file
export function httpConfig($httpProvider, AuthInterceptProvider) {
'ngInject';
AuthInterceptProvider.interceptAuth(true);
// added for show loader
$httpProvider.interceptors.push(function (loaderService, $q) {
'ngInject';
return {
'request': function (config) {
loaderService.switchLoaderModeOn();
return config;
},
'requestError': function (rejection) {
loaderService.switchLoaderModeOff();
return $q.reject(rejection);
},
'response': function (response) {
loaderService.switchLoaderModeOff();
return response;
},
'responseError': function (rejection) {
loaderService.switchLoaderModeOff();
return $q.reject(rejection);
}
};
});
}
// and in your module.js file
import {httpConfig} from './config/http.config';
.config(httpConfig)
顯示空白頁-Angular JS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.