Webサービスが返されるまでAngular JSで待機する方法

Webサービスを2回呼び出すと、2つの異なるセクションのグリッドが同じページに表示されます。Webサービスが返されるまでAngular JSで待機する方法

そして、両方のWebサービスコールが返されるまでページを表示したくありません。唯一私がset the please wait offと表示したいグリッド移入の両方の後

if (params) { 
    //I set the please wait dialog on 
    $scope.pleaseWait = { "display": "block" }; 


    //I hit the first service call and it will populate myFirstUIGrid 
    TransactionApiServices.getApiUnmergeProcessDetails(params).then(function (results) { 
     $scope.gridOptions_PR.data = ""; 
     $scope.gridOptions_PR.data.length = 0; 
     $scope.gridOptions_PR.data = results.data; 
     console.log(results); 
    }); 

    //I hit the second service call and it will populate mySecondUIGrid 
    TransactionApiServices.getApiUnmergeRequestDetails(params).then(function (results) { 
     $scope.gridOptions_RQ.data = ""; 
     $scope.gridOptions_RQ.data.length = 0; 
     $scope.gridOptions_RQ.data = results.data; 
     console.log(results); 
    });

............ ABCCtrl.jsに

：ここ

は、それがどのように見えるかですグリッド。

<div class="home-grid-content" ng-controller="TransactionDetailsUnmergeController"> 
    <div ng-style="pleaseWait"> 
     <div class="refresh" style="width:100%;height:100px;"> 
      <h4>Please wait....</h4> 
     </div> 
    </div> 
    <div ng-style="toggleDetails"> 
     <h3>Unmerge Request Log</h3> 
     <div ui-grid="gridOptions_RQ" ui-grid-selection class="" ui-grid-pagination ui-grid-auto-resize> 
      <div class="watermark" ng-show="!gridOptions.data.length">No data available</div> 
     </div> 

     <div class="grid-pager"> 
      <uib-pagination boundary-links="true" total-items="totalItems" items-per-page="4" ng-change="pageChanged(currentPage)" ng-show="(totalItems>4) == true" 
          ng-model="currentPage" class="pagination" direction-links="false" id="HconstUnmerge_1" 
          first-text="&laquo;" last-text="&raquo;"> 
      </uib-pagination> 
     </div> 
     <br/> 
     <h3>Unmerge Process Log</h3> 
     <div ui-grid="gridOptions_PR" ui-grid-selection class="" ui-grid-pagination ui-grid-auto-resize> 
      <div class="watermark" ng-show="!gridOptions.data.length">No data available</div> 
     </div> 

     <div class="grid-pager"> 
      <uib-pagination boundary-links="true" total-items="totalItems" items-per-page="4" ng-change="pageChanged(currentPage)" ng-show="(totalItems>4) == true" 
          ng-model="currentPage" class="pagination" direction-links="false" id="HconstUnmerge_1" 
          first-text="&laquo;" last-text="&raquo;"> 
      </uib-pagination> 
     </div> 

     <div style="margin-top:8px;"> 
      <button type="button" class="btn btn-default pull-left" ng-click="backToDetailsPage()">Cancel</button> 
     </div> 
    </div> 

</div>

出典

2016-04-29 StrugglingCoder

使用根本Q –

あなたはあなたのJSに行くためのHTMLを提供していないので、私はあなたのためにいくつかを作っていきます。

TransactionApiServices.getApiUnmergeRequestDetailsの代わりに$timeoutを使用しましたが、私がこのjsfiddleで行ったのと同じアイデアを使用すればうまくいくはずです。

HTML：

<body ng-app="MyApp" ng-controller="MyController"> 
    <div id="loading-overlay" ng-class="{ 'display': loading }"> 
     <div id="popup"> 
      Please Wait... <!-- any other styling you want goes on this popup. --> 
     </div> 
    </div> 

    <div> 
     {{data}} 
    </div> 
</body>

JS：

angular.module("MyApp", []); 

angular.module("MyApp").controller("MyController", function ($scope, $timeout, $q) { 
    $scope.data = ""; 

    var firstPromise = TransactionApiServices.getApiUnmergeProcessDetails(params).then(function() { 
     $scope.gridOptions_PR.data = ""; 
     $scope.gridOptions_PR.data.length = 0; 
     $scope.gridOptions_PR.data = results.data; 
     console.log(results); 
    }); 

    var secondPromise = TransactionApiServices.getApiUnmergeRequestDetails(params).then(function() { 
     $scope.gridOptions_RQ.data = ""; 
     $scope.gridOptions_RQ.data.length = 0; 
     $scope.gridOptions_RQ.data = results.data; 
     console.log(results); 
    }); 

    $scope.loading = true; 

    $q.all([firstPromise, secondPromise]).then(function() { 
     $scope.loading = false; 
    }); 
});

はCSS：

#loading-overlay { 
    position: fixed; 
    display: none; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 100000; 
    background-color: #000000; 
    opacity: 0.5; 
} 

#loading-overlay.display { 
    display: block !important; 
} 

#popup { 
    margin: 0 auto; 
    width:75%; 
    margin-top: 100px; 
    color: rgba(255, 255, 255, 1); 
}

https://jsfiddle.net/kszat61j/アクションでそれを見るために。

スタイリングにはそれほど進んでいませんが、一般的な考えはあなたが望むものだと思います。

EDIT：あなたの質問に少しだけはっきりと関連するコードを変更しました。うまくいけば、これは役に立ちます。

出典

2016-04-29 17:13:38 kfreezen

実際には私は推測することはできません。 'TransactionApiServices.getApiUnmergeRequestDetails（params）'へのその呼び出しは、 'var getApiUnmergeRequestData = function（param）{ }のようなWebサービスを呼び出している別のサービスを呼び出します。 var url = BasePath + 'TransactionNative/gettransunmergerequest /' + param ["trans_key"]; '...タイムアウトオプションですか？ – StrugglingCoder

私はあなたのコードにアクセスできなかったので、その関数の代わりに$ timeoutを使っていました。コードを更新しました。うまくいけば少しはっきりしています。 – kfreezen

あなたは$q.all([ array of promises ]).then(...)を使用することができます。ここでは

$scope.toggleDetails = { "display": "block" }; 
    $scope.toggleHeader = { "display": "block" }; 
    $scope.pleaseWait = { "display": "none" };

は2つのUIのグリッドを保持しているページです。確認してください docs

すべて（約束）;

すべての入力約束が解決されたときに解決される単一の約束に複数の約束を組み合わせます。

編集：あなたはこの

htmlのためにNGに隠すとngのショーを使用することができます

var promises = [$timeout(angular.noop, 500), $timeout(angular.noop, 5000)]; 
$q.all(promises).then(function(results){ 
//This will be executed when both promises fulfill - after 5000ms 
var promise1_result = results[0]; 
var promise2_result = results[1]; 

doStuff(); 
})

出典

2016-04-29 17:00:26

から延期あなたは私が与えたデータを使用した例をしてください与えることはできますか？ – StrugglingCoder

例：

<div ng-show='grid1 && grid2 '>grid1</div> 

<div ng-show='grid1 && grid2 '>grid2</div> 

<div ng-hide='grid1 && grid2 '>please wait</div>

if (params) { 
    //I set the please wait dialog on 
    $scope.pleaseWait = { "display": "block" }; 


    //I hit the first service call and it will populate myFirstUIGrid 
    TransactionApiServices.getApiUnmergeProcessDetails(params).then(function (results) { 

     $scope.grid1 = true 

     $scope.gridOptions_PR.data = ""; 
     $scope.gridOptions_PR.data.length = 0; 
     $scope.gridOptions_PR.data = results.data; 
     console.log(results); 
    }); 

    //I hit the second service call and it will populate mySecondUIGrid 
    TransactionApiServices.getApiUnmergeRequestDetails(params).then(function (results) { 


     $scope.grid2 = true 

     $scope.gridOptions_RQ.data = ""; 
     $scope.gridOptions_RQ.data.length = 0; 
     $scope.gridOptions_RQ.data = results.data; 
     console.log(results); 
    });

出典

2016-04-29 17:12:21 aseferov

ここでは、非表示または表示を設定していますか？私の質問に投稿しているhtmlをご覧ください。 – StrugglingCoder

これは実際には甘いですが、結果を待つ間に 'please wait div 'と表示されません。更新された質問をご覧ください。 – StrugglingCoder

'ng-hide = 'grid1 && grid2''がなくても 'please wait'を表示しますか？私はそれが目に見える必要があるデフォルトを意味し、あなたのCSSを確認してください – aseferov

甘いとあなたが

myApp.controller('CheckServiceCtrl',function($scope){ 
    $scope.service1=false; 
    $scope.service2=false; 
    //after returning data from service1 set 
    $scope.service1=true; 
    //after return data from service2 set 
    $scope.service2=true; 
}

はあなたが2つの異なるdiv要素内のデータを表示しているし、あなたの条件データに従ってのみ、両方の完了後に表示されなければならないと仮定ngの非表示やNG-ショーを使用することができます理解しやすいですサービスのように宣言する必要があります。

<div ng-controller="CheckServiceCtrl" > 
    <div id="serivces" ng-show="service1 && service2"> 
     <div id="service1" > 
     Display of service1 
     </div> 
     <div id="service2"> 
     Display of service2 
     </div> 
    </div> 
    <div id=pleasewait" ng-hide="service1 && service2"> 
     Please Wait.... 
    </div> 
</div>

出典

2016-04-29 17:17:22 sunixi

Webサービスが返されるまでAngular JSで待機する方法

答えて

関連する問題