[转自] http://zhidao.baidu.com/link?url=MX9eSRkQbBC8zrjsCi-t_PsftVRSIjiaUTHhdp6eDiZ0IqaZehSCo3n7fFXWyP3fzKR1uDfUN0VpiOhUtXvEDpv1hmofuevrSrBNvutbWz_

0、提供一种用过(也许已不是最佳)的思路:

0.1、最外层的 index.html 放个内容为 "Loading..." 的 div;通过最外层 controller 的 $scope.busy 变量,使用 ng-show 控制是否显示;

0.2、需要显示 Loading 时,冒泡 BUSY 事件;最外层 controller 收到 BUSY 事件就将 $scope.busy 置为 true,那个 DIV 就显示了;

0.3、同理,要隐藏就冒泡 NOTBUSY 事件;

1、假设目录结构是:

index.html (这是最外层,body 的 controller 是 mainController;这里写 ng-view)

/partial (各子 view 放这里)

2、index.html 的 body 使用的 mainController 是最外层 controller,在这 mainController 监听 BUSY/NOTBUSY 事件:

1
2
3
4
$scope.$on("BUSY"function(){        $scope.busy = true;
});
$scope.$on("NOTBUSY"function(){        $scope.busy = false;
});

index.html 里放着那个显示 "Loading..." 字样的 DIV:

1
2
3
<div class="loading" ng-show="busy"> <i class="fa fa-spin fa-spinner fa-lg"></i>
        loading ...
</div>

3、使用:

比如在子 view /partial/po.html (使用 poController)中某动作后要显示 Loading 框:

在 poController.js 中:

1
2
3
4
5
6
$scope.getAllPOs = function(){
    $scope.$emit("BUSY");
    // get data from server
    // ...
    // when done call $scope.$emit("NOTBUSY");
};

Angular 怎么在加载中加入 Loading 提示框的更多相关文章

  1. JS实现页面加载完毕之前loading提示效果

    1.获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.docu ...

  2. js实现的页面加载完毕之前loading提示效果

    页面加载readyState的五种状态 原文如下: 0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loadin ...

  3. 【datatable】正在加载中的信息提示

    datatable插件 DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, ...

  4. 利用document的readyState去实现页面加载中的效果

    打开新的网页时,为了增强友好性体验,告知用户网页正在加载数据需要呈现一个"页面加载中"之类的提示,只需要利用document就可以实现. 实现示例代码如下: <style&g ...

  5. 微信小程序之----加载中提示框loading

    loading loading只有一个属性hidden .wxml <view> <loading hidden="{{hidden}}"> 加载中... ...

  6. 用Loading 加载中的整页加载来做蒙层

    总结:遇见的bug 如何写一个蒙层 最初我打算的是自己写一个蒙层,但是写出来后, 不能够将整个屏幕全部覆盖.只能够覆盖 除[顶部导航] 和[左侧菜单栏] 于是我就使用了element-ui中的 [Lo ...

  7. ajax请求成功前,加载中loading显示

    /*第一次刷新--非定时器刷新数据*/ var fistInitColumn = true; var getAllColumnDatas = function(){ var params = {}; ...

  8. layui的loading加载中

    var load = layer.load(1, { content: '数据加载中', shade: [0.4, '#393D49'], // time: 10 * 1000, success: f ...

  9. android 加载中、无网络、无数据、出错 四种状态的代码封装

    package com.weavey.loading.lib;import android.content.Context;import android.content.res.TypedArray; ...

随机推荐

  1. Cloud Design Patterns: Prescriptive Architecture Guidance for Cloud Applications

    January 2014 Containing twenty-four design patterns and ten related guidance topics, this guide arti ...

  2. linux内存监控 free

    free 命令详解: 执行命令后总共四行. 第一行: 列头 第二行: total 内存总数: 32881776 used 已经使用的内存数: 8324796 free 空闲的内存数: 24556980 ...

  3. 关于 href="\\#" 和 return false

    href="\\#"  跳转到本页 return false 相当于不刷新 href="javascript:void(0)"   或者 href=" ...

  4. go-spew golang最强大的调试助手,没有之一

    go内置的fmt.sprintf已经很强大了,但是和spew比起来还是相形见绌,这里来一个例子. import ( "fmt" "github.com/davecgh/g ...

  5. unix网络编程 str_cli epoll 非阻塞版本

    unix网络编程 str_cli epoll 非阻塞版本 unix网络编程str_cli使用epoll实现讲了使用epoll配合阻塞io来实现str_cli,这个版本是配合非阻塞io. 可以看到采用非 ...

  6. 编码原则实例------c++程序设计原理与实践(进阶篇)

    编码原则: 一般原则 预处理原则 命名和布局原则 类原则 函数和表达式原则 硬实时原则 关键系统原则 (硬实时原则.关键系统原则仅用于硬实时和关键系统程序设计) (严格原则都用一个大写字母R及其编号标 ...

  7. 基于CAS的单点登录实战(2)-- 搭建cas的php客户端

    在这之前已经搭好了CAS服务端 基于CAS的单点登录实战(1)-- 搭建cas服务器 PHP-Client php-Client是官方支持的,去官网下个最新版就好了.phpCAS 接入很简单,解压放到 ...

  8. 深度剖析MQTT协议的整个通信流程

    http://www.elecfans.com/d/587483.html MQTT,目前物联网的最主要的协议,基本所有收费的云平台都是基于MQTT协议,比如机智云,和所有的开放云平台比如中国移动的o ...

  9. mysql的innodb自增主键为什么不是连续的

    图1 图1中是表t原有的数据,这个时候我们执行show create table t会看到如下输出,如图二所示现在的自增值是2,也就是下一个不指定主键值的插入的数据的主键就是2 图2 Innodb引擎 ...

  10. Python正则表达式匹配日期与时间

    #!/usr/bin/env python # -*- coding: utf-8 -*- __author__ = 'Randy' import re from datetime import da ...