我如何等待Angular JS直到我的web服務返回

我有兩個對我的web服務的調用，他們都會在同一頁面中填充兩個不同的網格部分。我如何等待Angular JS直到我的web服務返回

而且我不想在Web服務調用返回之前顯示頁面。

這裏是什麼樣子：

在ABCCtrl.js

............

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

兩個網格填充後，我只希望set the please wait off和顯示器網格。

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

這裏是一個擁有兩個UI格的頁面：

<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 –

你沒有提供HTML去與你的JS，所以我會爲你做一些。

我用$timeout來代替TransactionApiServices.getApiUnmergeRequestDetails但是如果你在這個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/看到它在行動。

它沒有那麼多的造型，但我認爲一般的想法是你想要的。

編輯：更改代碼更清楚地與您的問題聯繫起來。希望這有助於。

來源

2016-04-29 17:13:38 kfreezen

其實我不能這樣做，我猜。對'TransactionApiServices.getApiUnmergeRequestDetails（params）'的調用調用另一個服務，然後調用Web服務，例如'var getApiUnmergeRequestData = function（param）{console.log（「Type before sending」）; var url = BasePath +'TransactionNative/gettransunmergerequest /'+ param [「trans_key」];'...... so超時一個選項？ – StrugglingCoder

我使用$ timeout作爲該函數的替代品，因爲我沒有訪問您的代碼。我更新了我的代碼，希望它更清楚一點。 – kfreezen

您可以使用$q.all([ array of promises ]).then(...)。檢查docs

all（promises）;

將多個承諾組合成單個承諾，當所有輸入承諾解決時解決。

編輯：爲例

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

可以使用NG隱藏和NG-顯示此

HTML：

<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

這實際上很可愛，但是在等待結果的時候並沒有顯示「請等待div」。請參閱最新的問題。 – StrugglingCoder

是否'請等待div'顯示，即使沒有'ng-hide ='grid1 && grid2''？我的意思是默認它必須是可見的，檢查你的css – aseferov

甜，易於理解，您可以使用NG隱藏或NG-顯示

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顯示數據，並根據您的要求的數據應該只都完成後顯示服務然後你應該聲明div像。

<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

我如何等待Angular JS直到我的web服務返回

回答

相關問題