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. Java 中判断字符串是否为空

    public class TestString { public static void main(String[] args) { String abc = null; //先判断是否为null再判 ...

  2. 在Eclipse中导入新浪微博SDK

    在Eclipse中导入新浪微博SDK 今天在看<Android开发应用实战>,全书都在讲一个android版的新浪微博客户端怎么做,于是按照书上步骤做.网上有人说这本书没有细节,我想对于小 ...

  3. servlet 学习笔记(三)

    同一用户的不同页面共享数据有以下四种方法: 1.sendRedirect()跳转 2.session技术 3.隐藏表单提交(form) 4. cookie技术(小甜饼) --------------- ...

  4. mongo oplog 整理

    首先需要介绍一下mongodb local库的作用 local库是MongoDB的系统库,记录着时间戳和索引和复制集等信息 test:PRIMARY> use local switched to ...

  5. GUC-7 同步锁 Lock

    import java.util.concurrent.locks.Lock; import java.util.concurrent.locks.ReentrantLock; /* * 一.用于解决 ...

  6. Oracle学习笔记——点滴汇总

    Oracle学习笔记——点滴汇总 http://www.botangdb.com/ Oracle GI = Grid Infrastructure = ASM + Cluster

  7. Docker简介与安装(一)

    Docker简介 Docker 是 Docker.Inc 公司开源的一个基于 LXC技术之上构建的Container容器引擎, 源代码托管在 GitHub 上, 基于Go语言并遵从Apache2.0协 ...

  8. mysql find_in_set函数详解

    Mysql函数FIND_IN_SET()的使用方法 有了FIND_IN_SET这个函数.我们可以设计一个如:一只手机即是智能机,又是Andriod系统的. 比如:有个产品表里有一个type字段,他存储 ...

  9. 批量ssh登录,获取操作系统、CPU、内存、硬盘信息<shell>

    说明:该脚本读取machine.txt文件中的机器名,然后批量ssh登录,获取每台机器的操作系统,CPU,内存,硬盘等信息. 使用方法:将文件保存为sh,chmod +x filename 为该sh文 ...

  10. MySQL 类型转换

    1.问题描述 在项目中遇到要将Int类型转为Char类型,然后利用转化后的Char类型进行模糊查询. 例:合同编号在数据库中为int类型 8066 用利用 806 模糊查询出合同编号为8066数据记录 ...