angularjs中如何在异步请求执行完以后再执行其他函数?
2024-08-28 07:19:38
angularjs中如何在异步请求执行完以后再执行其他函数?
之前脑袋回路就是从上到下的执行js,直到有一次我的页面上已经显示了空才走到angularjs里的$http的成功回调函数里,然后才开始正视工程里异步请求对项目的影响。
第一反应是放回调就可以了:
var app = angular.module('myApp', []); app.controller('testCtrl', function($scope, $http) {
$http({
method: 'GET',
url: 'xxx'
}).then(function succ(data) {
$scope.testSucc();
}, function err(data) {
$scope.testErr(); });
$scope.testSucc = function(){
console.log("success func");
}
$scope.testErr = function(){
console.log("error func");
}
});
但是如果其他函数($scope.testSucc、$scope.testErr())不是这个控制器里的呢?对,你可以使用广播事件,然后在其子控制器里监听这个回调结果,但是我不喜欢这种方法,因为一个函数还好,如果是整个页面都依赖这个这个结果,不会累死啊。
我使用了一个小技巧:angularjs的控制器执行是在页面加载这个控制器所对应的页面的时候才会执行,所以在异步请求前设置页面不加载,异步请求成功的函数里设置页面加载就可以了。这里就利用了ng-if的特点了:ng-if 在后面表达式为 true 的时候才创建这个 dom 节点。
html页面如下:
<body>
<div ng-app="myApp" ng-controller="fatherCtrl">
<div ng-if="succResult" ng-controller="childrenCtrl">
<p>{{data}}</p>
</div>
</div>
</body>
js:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.succResult = false;
$http({
method: 'GET',
url: 'xxx'
}).then(function succ(data) {
$scope.succResult = true;
$scope.data=data;
}, function err(data) {
$scope.testErr();
});
});
以上是我利用ng-if和$http实现异步回调的效果。
最新文章
- App开发流程之加密工具类
- C# 4.0四大新特性代码示例与解读
- apache(nginx)+django+virutalenv(virtualenvwrapper)+gunicorn+supervisor配置高效web环境
- oracle JOB学习(一)---基础
- Non-ASCII characters are not allowed outside of literals and identifiers
- uva 10562 undraw the trees(烂题) ——yhx
- int *p()与int (*p)()的区别
- JAVA中继承时方法的重载(overload)与重写/覆写(override)
- [原创]Devexpress XtraReports 系列 6 创建并排报表
- mysql的进阶
- 题解-CodeChef IOPC14L Sweets Problem
- 【Teradata】配置PE和AMP(congfig和reconfig工具、vprocmanager)
- OpenCV3 for python3 学习笔记3-----用OpenCV3处理图像2
- python 回调函数,最简单的例子
- 专项测试——移动app安装包检测
- 蓝牙inquiry流程之Inquiry Complete处理
- MySQL性能优化方法三:索引优化
- 七.jQuery源码解析之.toArray()
- 【BZOJ5083】普及 单调栈+二分+RMQ
- 初见spark-02(RDD及其简单算子)