我有两个对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="«" 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>
您没有提供与JS一起使用的HTML,所以我会为您补上一些。
我用$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/观看操作。
样式没有太多用,但我认为一般的想法是您想要的。
编辑:更改代码以更清楚地与您的问题相关。希望这会有所帮助。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句