java - Angularjs如何仅在调用init方法后加载div内容
问题描述
我是 AngularJs 的新手,最初是在页面加载时,即。当 loadResponseData() 正在处理时,我需要显示进度 div,并且在 ajax 调用完成后需要显示带有响应数据的成功 div。但是 loadResponseData() 完成后没有显示成功。有没有办法在完成 ajax 调用之前显示进度条,并且应该在从 ajax 调用收到响应后显示成功 div。对不起我的英语,请保存我的一天。
<%
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));
});
};
解决方案
在此处的指令中尝试此示例$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>
推荐阅读
- elasticsearch - Kibana 脚本字段值未在可视化时填充,但在发现期间填充
- c# - StreamReader 在 readLine 上停止程序
- r - 使用 data.tables 时循环
- angular - core.js:1673 错误错误:未捕获(承诺中):TypeError:无法读取未定义的属性“路由”
- xquery - 无法通过 MarkLogic Corb 工具获取 XML 文件
- python - 使用 Pyinstaller 创建的 .exe python 脚本不会创建文本文件
- html - CSS“网格模板区域”无法按预期工作
- python - Plotly hovermode=x 显示太多值
- python - 用户关闭选项卡时停止运行 python 脚本(Flask)
- flutter - 如何在使用 providerListener 的消费者中打开状态通知器时获取数据列表。扑