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中如何在异步请求执行完以后再执行其他函数?的更多相关文章

  1. 用一个bat文件调用另外两个bat文件,当1.bat执行完后再执行2.bat

    用一个bat文件调用另外两个bat文件,当1.bat执行完后再执行2.bat 摘自:https://zhidao.baidu.com/question/492732911.html @echo off ...

  2. iOS AFNetWorking中block执行完后再执行其它操作

    需求:同时进行两次网络请求,网络请求是异步的,在网络请求成功后进行其它的操作.两个网络请求是这样,一个网络请求中block执行完之后,再进行其它操作,也是一样的原理,只是这时候不需要线程组了,只需要信 ...

  3. vue在一个方法执行完后再执行另一个方法

    vue在一个方法执行完后执行另一个方法 用Promise来实现.Promise是ES6的新特性,用于处理异步操作逻辑,用过给Promise添加then和catch函数,处理成功和失败的情况 ES7中新 ...

  4. 使用Promise发送多个异步请求, 全部完成后再执行

    const datas = idList .map(id => url+'/id') .map(url => fetch(url).then(res => res.json())); ...

  5. ES6(Promise)等一个函数执行完后再执行另一个函数

    function text1(){ return new Promise((resolve, reject) => { setTimeout(function () { resolve(cons ...

  6. js 执行完setTimeout再接着执行函数

    var counter = 0; function increase(){ var d = jQuery.Deferred(); var doIncrease = function() { if(co ...

  7. Vue--axios:vue中的ajax异步请求(发送和请求数据)、vue-resource异步请求和跨域

    跨域原理: 一.使用axios发送get请求 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 & ...

  8. 在JQuery和Js中,如何让ajax执行完后再继续往下执行 async

    async (默认: true) 默认设置下,所有请求均为异步请求.如果需要发送同步请求,请将此选项设置为 false.注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行. var t ...

  9. vue(6)—— vue中向后端异步请求

    异步请求 其实什么是异步请求已经不用多说了,通俗的说,就是整个页面不会刷新,需要更新的部分数据做局部刷新,其他数据不变. 学到这里,你应该用过jquery里的ajax了,所以很能理解了,不多说了.详细 ...

随机推荐

  1. poj1063

    题意:有一些珠子排成一圈,珠子有两种颜色:黑和白.每次操作可以调换中间隔着一个珠子的两珠子的位置,给出这个圈子的初始状态,问最终能否通过操作让圈子中所有同色的珠子排在一起,即黑白分开. 分析:分两种情 ...

  2. python网络编程-进程间数据通信(Queue,Pipe ,managers)

    一:进程间数据交换方法 不同进程间内存是不共享的,要想实现两个进程间的数据交换,可以用以下方法: Queue,Pipe ,managers 1)Queue,使用方法跟threading里的queue差 ...

  3. file.getPath() getAbsolutePath() getCanonicalPath()区别

    package file; import java.io.File; import java.io.IOException; public class getFilePath { public sta ...

  4. java基础80 JSP基础知识点(网页知识)

    1.jsp的引入 Servlet的作用:用java语言开发动态资源技术!!!    Jsp的作用:用java语言(+html语言)开发的动态资源技术!!!     Jsp就是servlet 问题:为什 ...

  5. git —— 标签

    标签:为分支添加一个可读标识. 1.创建标签 操作步骤: 切换到需要打标签的分支上 $ git branch $ git checkout master 为当前分支新增一个标签 $ git tag v ...

  6. python随笔(三)

    在对字符串的操作中,s[::-1]表示将字符串逆序输出. 字符串本身不能改变(管理者而非所有者) 列表的内容是可以改变的,且列表的内容可以不仅仅是字符串.对于一个列表,注意b=a和b=a[:]的区别. ...

  7. 洛谷P2812校园网络

    传送门啦 其实这个题只要读懂分析好题意就不是很难. 就是将一个有向图进行缩点操作,把一个强连通分量看成一个点,求入度为 0 的点和出度为 0 的点各有多少. 在这里先向大家推荐两个题目,建议大家先去看 ...

  8. Java 中 日期 时间 加减

    DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); //方法1(推荐,功能强大灵活多变) Ca ...

  9. ORACLE TO_CHAR(SYSDATE,'D')

    DDD是该天在一年内的第多少天,d是在一周内第几天,dd是一个月内的 DY :Day of week abbreviated Mon, Tue, Fri DAY :Day of week spelle ...

  10. thinkphp和ueditor自定义后台处理方法整合

    先了解一下ueditor后台请求参数与返回参数格式规范: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 ...