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了,所以很能理解了,不多说了.详细 ...
随机推荐
- 编译器是如何实现32位整型的常量整数除法优化的？[C/C++]
引子 在我之前的一篇文章[ ThoughtWorks代码挑战——FizzBuzzWhizz游戏 通用高速版(C/C++ & C#) ]里曾经提到过编译器在处理除数为常数的除法时,是有优化的,今 ...
- mac 下安装pip
pip是常用的Python包管理工具,类似于Java的maven.用python的同学,都离不开pip. 在新mac中想用home-brew安装pip时,遇到了一些小问题: bogon:~ wangl ...
- java基础79 会话管理（Cookie技术、Session技术）
1.概念 会话管理:管理浏览器和服务器之间会话过程中产生的会话数据. Cookie技术:会话数据保存到浏览器客户端.[存 编号/标记(id)] Session技术:会话技术会保存到 ...
- DedeCMS栏目页调用当前栏目名和上级栏目名
在构建网页的时候,如果不想逐个写栏目列表页的标题,即列表页标题形式为:{field:seotitle/}_{dede:global.cfg_webname/},其中{field:seotitle/}为 ...
- 让你的 JMeter 像 LoadRunner 那样实时查看每秒事务数(TPS)、事务响应时间(TRT)
熟悉 LoadRunner 的朋友一定不会对其 TPS(每秒事务数).TRT(事务响应时间) 等视图感到陌生,因为这是压力测试最为关键的两个指标.JMeter 以其开源.轻巧.灵活.扩展性高等特性赢得 ...
- TreeMap和TreeSet在排序时如何比较元素？Collections工具类中的sort()方法如何比较元素？
TreeSet要求存放的对象所属的类必须实现Comparable接口,该接口提供了比较元素的compareTo()方法,当插入元素时会回调该方法比较元素的大小.TreeMap要求存放的键值对映射的键必 ...
- NopCommerce 执行计划任务不同Services协调操作导致更新数据失败的问题！
问题描述: 在Nop的计划任务里需要两个任务协调操作 _shipmentService.InsertShipment(shipment); _orderProcessingService.Ship(s ...
- NOIP2015&2016普及组解题报告
NOIP2015普及组题目下载 NOIP2016普及组题目下载 NOIP2015普及组题目: NOIP2018RP++ NOIP2016普及组题目 NOIP2018RP++ T1 金币\((coin. ...
- 【LOJ】#2056. 「TJOI / HEOI2016」序列
题解 这个我们处理出来每一位能变化到的最大值和最小值,包括自身 然后我们发现 \(f[i] = max(f[i],f[j] + 1) (mx[j] <= a[i] && a[j] ...
- 【POJ】1067.取石子游戏
题解 这道题让我对SG函数有了更深刻的理解,这是道打表找规律题 我们打出来SG函数似乎是 1 2必败 3 5必败 4 7必败 6 10必败 8 13必败 哇我找到规律了-- 然而,我显然不会通项 后来 ...