我是 AngularJs 的新手，最初是在頁(yè)面加載時(shí)。當(dāng) loadResponseData() 正在處理時(shí)，我需要顯示進(jìn)度 div，在 ajax 調(diào)用完成后需要顯示帶有響應(yīng)數(shù)據(jù)的成功 div。但是在 loadResponseData() 完成后沒(méi)有顯示成功。有沒(méi)有辦法在完成 ajax 調(diào)用之前顯示進(jìn)度條，并且應(yīng)該在從 ajax 調(diào)用收到響應(yīng)后顯示成功 div。對(duì)不起我的英語(yǔ)，請(qǐng)拯救我的一天。<%PayBean payBean = (PayBean) session.getAttribute("payData");%><div ng-controller="payCtrl" ng-init="loadResponseData()" id="loadResponseData"><div class="row"> <div class="col-12 col-md-12 col-sm-12 col-lg-8"> <form id="response"> <div class="row row-space" ng-if="status=='success'"> // load response data in elements </div> <div class="row row-space" ng-if="status=='progress'"> // Progress bar takes place </div> </form> </div><div>payCtrl中的方法：$scope.loadResponseData = function() { $http.post(contextRoot + getResponseData(function(data) { var status = sessionStorage.getItem("status"); $scope.status = status ; sessionStorage.setItem('data', JSON.stringify(data)); });};
2 回答
湖上湖
TA貢獻(xiàn)2003條經(jīng)驗(yàn) 獲得超2個(gè)贊
在here$timeout指令中嘗試使用此示例替換$http并使用ng-show代替ng-if
var app = angular.module('app',[]);
app.controller('payCtrl',function($timeout,$scope){
$scope.status = "progress"; //by default set as progress
$scope.loadResponseData = function() {
console.log("yes called");
$timeout(function(){
$scope.status = "success";
},2000);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' class="container" ng-controller="payCtrl" ng-init="loadResponseData()" id="oadResponseData">
<div class="row">
<div class="col-12 col-md-12 col-sm-12 col-lg-8 center">
<form id="response" class="success">
<div class="row row-space" ng-show="status== 'success'">
<h1>success code loaded</h1>
</div>
<div class="row row-space" ng-show="status== 'progress'">
<h1>Progress code loaded</h1>
</div>
</form>
</div>
<div>
holdtom
TA貢獻(xiàn)1805條經(jīng)驗(yàn) 獲得超10個(gè)贊
因?yàn)槟谑褂胣g-if指令，它會(huì)創(chuàng)建新的范圍，因此狀態(tài)不可見(jiàn)。嘗試使用controllerAs語(yǔ)法或使用ng-hide或ng-show指令。
試試這個(gè)
<div ng-controller="payCtrl as vm" ng-init="vm.loadResponseData()" id="loadResponseData">
<div class="row">
<div class="col-12 col-md-12 col-sm-12 col-lg-8">
<form id="response">
<div class="row row-space" ng-if="vm.status=='success'">
// load response data in elements
</div>
<div class="row row-space" ng-if="vm.status=='progress'">
// Progress bar takes place
</div>
</form>
</div>
<div>
并且在控制器使用var vm = this;代替$scope;
var vm = this;
vm.loadResponseData = function() {
vm.post(contextRoot + getResponseData(function(data) {
var status = sessionStorage.getItem("status");
vm.status = status ;
sessionStorage.setItem('data', JSON.stringify(data));
});
};
添加回答
舉報(bào)
0/150
提交
取消