我对我的网络服务进行了两次调用，它们都将填充同一页面中网格的两个不同部分。
并且在两个 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);
});
仅填充网格后，我想设置请稍候关闭并显示网格。
$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="«" last-text="»">
</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="«" last-text="»">
</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>
最佳答案
您没有提供 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/看看它的实际效果。
它没有太多的样式，但我认为总体思路就是你想要的。
编辑:更改了代码以更清楚地与您的问题相关。希望这有帮助。
关于javascript - 我如何在 Angular JS 中等待直到我的 Web 服务返回，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36943729/