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了,所以很能理解了,不多说了.详细 ...
随机推荐
- 使用离线包部署kubernetes 1.9.0、kubernetes-dashboard 1.8
=============================================== 2018/3/22_第2次修改 ccb_warlock 更新 ...
- C# byte[] 转换16进制字符串
1.byte[] 转换16进制字符串 1.1 BitConverter方式 var str = DateTime.Now.ToString(); var encode = Encoding.UTF8; ...
- appium----adb shell输入中文/Emoji表情符(ADBKeyBoard)
前序 “adb shell input textyoyo“ 可以通过adb 输入英文的文本,由于不支持unicode编码,所以无法输入中文,github上有个国外的大神写了个ADBKeyBoard输入 ...
- SQL Server操作实例
创建数据库 create database accountInfo/*创建账户信息数据库*/ 创建数据表 /*定义主码.外码.和人数.余额的取值范围.*/ /*创建储蓄所表*/ create tabl ...
- 一步一步学习IdentityServer3 (14) 启用Https
申领一个CA证书,我用了一个腾讯的免费证书night-c.cn,这是腾讯云买域名送的一个证书 是单域名,非泛域名 1:安装证书 IIS选择证书 2:将证书加载到Identityserver3中,并启 ...
- C#中ASCII码与字符串的互换
主要代码: int a = (int)'a';// 把字符直接转换为int类型,即可得到ASCII码值 ).ToString();// 将数字直接转换为char类型,即可得到ASCII码对应的字符 C ...
- SQL group 分组查询
1.使用group by进行分组查询 在使用group by关键字时,在select列表中可以指定的项目是有限制的,select语句中仅许以下几项: 被分组的列 为每个分组返回一个值得表达式,例如 ...
- CCF CSP 201709-3 JSON查询
CCF计算机职业资格认证考试题解系列文章为meelo原创,请务必以链接形式注明本文地址 CCF CSP 201709-3 JSON查询 问题描述 JSON (JavaScript Object Not ...
- 1089: [SCOI2003]严格n元树
好久没更新了..于是节操掉尽python水过本来就水的题.. n,d=map(int, raw_input().split()) if d==0: print 1 else: f=[1] for i ...
- ueditor初始化
一.下载文件复制到项目中 二.复制表情文件 三.复制列表图片 四.修改ueditor.config.js文件 五.接着修改net文件下config.json文件 六.完蛋了,不支持IE8,版本替换为了 ...