由于我正在使用$ 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”。代码中的问题在哪里？
最佳答案
您的websiteServices代码将异步执行。这意味着以上代码将显示加载程序，然后几乎立即将其再次隐藏。
要在控制器中处理异步代码，您必须从服务中返回一个Promise，并使用.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
});