加載程序未在角度js上的ajax請求中顯示

由於我使用$ http使用ajax請求。從我在服務器上的操作需要很長時間，我需要在處理請求時顯示加載器，但加載器不顯示。雖然我的代碼似乎正確。我嘗試了不同的方法，但沒有奏效。加載程序未在角度js上的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」，然後在請求完成後我將加載「false」。代碼中的問題在哪裏？

來源

2016-10-13 Umar

你把它放在了'$ rootScope'，所以你需要做的：'NG秀= 「$ root.isLoading」' – devqon

但是，這也不起作用。由於根目錄可以訪問應用程序內的所有內容 – Umar

您的網站服務代碼異步執行。這意味着上面的代碼會顯示加載器，然後幾乎立即再次隱藏它。

要處理控制器中的異步代碼，您必須從服務中返回承諾，並使用.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 
});

來源

2016-10-13 11:27:20

我需要包含$ q的依賴嗎？ – Umar

是的，在你的服務中你必須注入'$ q'。它內置到角，所以只是注入它 –

非常簡單和工作非常感謝你@Erik – Umar

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; 
    }

來源

2016-10-13 11:26:49

嘗試使用defer.promise –

爲什麼我需要返回defer.Promise？ – Umar

如果您正在請求，那麼，我認爲showhide裝載機最好的辦法是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)

來源

2016-10-13 11:31:41

加載程序未在角度js上的ajax請求中顯示

回答

相關問題