角度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"に設定し、要求が完了したらisLoadingを "false"にします。コードのどこに問題がありますか？

出典

2016-10-13 Umar

あなたはあなたがする必要があるので、 '$ rootScope'の上に置きます：' NG-ショー= "$ root.isLoading" ' – devqon

しかし、また、動作しないこと。 rootscopeはアプリ内のすべてにアクセスできるので、 – 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'を注入する必要があります。それは角に組み込まれているので、それを注入する –

非常にシンプルで働いていただきありがとうございます@エリック – 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

あなたが要求を行っている場合は、私は最善の方法hideshowにローダが私のスニペットで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リクエストでローダーが表示されない

答えて

関連する問題