angularjs中如何在异步请求执行完以后再执行其他函数？
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实现异步回调的效果。
angularjs中如何在异步请求执行完以后再执行其他函数？的更多相关文章
- 用一个bat文件调用另外两个bat文件,当1.bat执行完后再执行2.bat
用一个bat文件调用另外两个bat文件,当1.bat执行完后再执行2.bat 摘自:https://zhidao.baidu.com/question/492732911.html @echo off ...
- iOS AFNetWorking中block执行完后再执行其它操作
需求:同时进行两次网络请求,网络请求是异步的,在网络请求成功后进行其它的操作.两个网络请求是这样,一个网络请求中block执行完之后,再进行其它操作,也是一样的原理,只是这时候不需要线程组了,只需要信 ...
- vue在一个方法执行完后再执行另一个方法
vue在一个方法执行完后执行另一个方法 用Promise来实现.Promise是ES6的新特性,用于处理异步操作逻辑,用过给Promise添加then和catch函数,处理成功和失败的情况 ES7中新 ...
- 使用Promise发送多个异步请求, 全部完成后再执行
const datas = idList .map(id => url+'/id') .map(url => fetch(url).then(res => res.json())); ...
- ES6(Promise)等一个函数执行完后再执行另一个函数
function text1(){ return new Promise((resolve, reject) => { setTimeout(function () { resolve(cons ...
- js 执行完setTimeout再接着执行函数
var counter = 0; function increase(){ var d = jQuery.Deferred(); var doIncrease = function() { if(co ...
- Vue--axios：vue中的ajax异步请求（发送和请求数据）、vue-resource异步请求和跨域
跨域原理: 一.使用axios发送get请求 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 & ...
- 在JQuery和Js中,如何让ajax执行完后再继续往下执行 async
async (默认: true) 默认设置下,所有请求均为异步请求.如果需要发送同步请求,请将此选项设置为 false.注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行. var t ...
- vue（6）—— vue中向后端异步请求
异步请求 其实什么是异步请求已经不用多说了,通俗的说,就是整个页面不会刷新,需要更新的部分数据做局部刷新,其他数据不变. 学到这里,你应该用过jquery里的ajax了,所以很能理解了,不多说了.详细 ...
随机推荐
- java基础68 JavaScript城市联动框（网页知识）
1.城市联动框 <!doctype html> <html> <head> <meta charset="utf-8"> <t ...
- 添加自签发的 SSL 证书为受信任的根证书
原文:http://cnzhx.net/blog/self-signed-certificate-as-trusted-root-ca-in-windows/ 添加自签发的 SSL 证书为受信任的根证 ...
- opencv之dft及mat类型转换
跑实验时用到dft这个函数,根据教程,需要先将其扩充到最优尺寸,但我用逆变换后发现得到的mat的维数竟然不一样.因此还是不要扩展尺寸了. 参考:http://www.xpc-yx.com/2014/1 ...
- Codeforces 580D Kefa and Dishes(状态压缩DP)
题目链接:http://codeforces.com/problemset/problem/580/D 题目大意:有n盘菜每个菜都有一个满意度,k个规则,每个规则由x y c组成,表示如果再y之前吃x ...
- （转）链接服务器——获取EXCEL数据
测试目的:验证利用链接服务器.分布式查询获取EXCEL中的数据测试环境:Microsoft SQL Server 2005 - 9.00.3080.00 (X64) Enterprise Editi ...
- MySQL学习笔记：创建整年日期
见识到另外一种创意,惊讶! 1.创建小数据表 0-9 # 创建小数据表 DROP TABLE IF EXISTS aa_numbers_small; CREATE TABLE aa_numbers_s ...
- HBase（十）HBase性能调优总结
一. HBase的通用优化 1 高可用 在 HBase 中 Hmaster 负责监控 RegionServer 的生命周期,均衡 RegionServer 的负载,如果 Hmaster 挂掉了,那么整 ...
- 修改linux下默认的python版本
首先在终端输入:python --verison 查看本机默认采用的python 版本 接着进入/usr/local/lib 目录查看当前系统中安装了多少个python版本 如果只有一个,就安装你需要 ...
- 关于谷歌浏览器62版本之后引用video.js不能自动播放的问题（Cross-origin plugin content from http://vjs.zencdn.net/swf/5.0.0-rc1/video-js.swf must have a visible size larger than 400 x 300 pixels, or it will be blocked.）
Cross-origin plugin content from http://vjs.zencdn.net/swf/5.0.0-rc1/video-js.swf must have a visibl ...
- openwrt安装tcpdump
打开openwrt路由器的ssh功能 System->administration Ssh登陆 opkg update 会报很多错误 措施如下: 备份 /etc/opkg.conf Cp /et ...