[转自] 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. R语言安装包,切换镜像

    source("http://bioconductor.org/biocLite.R") options(BioC_mirror="http://mirrors.ustc ...

  2. 数据库 MySQL 之 表操作、存储引擎

    数据库 MySQL 之 表操作.存储引擎 浏览目录 创建(复制) 删除 修改 查询 存储引擎介绍 一.创建(复制) 1.语法: 1 2 3 4 5 CREATE TABLE 表名(     字段名1 ...

  3. URL 与 URI

    http://localhost:8080/TEST_Servlet/ClientRequest/test?name=wr getRequestURL:http://localhost:8080/TE ...

  4. 加载 页面 中js 方法

    js 文件中 var mingchen= mingchen|| {    init: function (){ } }; 文件中 mingchen.init(); 注意问题: 在新加载 页面中     ...

  5. ajax 跨域名调用

    在ajax 中要跨域名 请求的时候要注意 1. dataType: 'jsonp', 2. jsonp: 'callback', <script type="text/javascri ...

  6. webapi put 请求405问题

    put 请求的时候  浏览器会像服务器发送两个请求 如何没做任何配置第一个options请求是会报错的 这是需要配置路由给options作响应 这时options请求就通过了,然后你们会看到你的put ...

  7. Time - Time-interval Measurements

    public class TimeHelper { private long _start, _stop, _elapsed; /// <summary> /// 获取初始时间戳 /// ...

  8. firefox 59 无法使用 pac 代理上网

    最近装了 firefox,电脑配置不太高,chrome 太吃内存了. 但是发现 SwitchyOmega的 pac 模式无法工作,这篇文章提到了两个思路, 其中network.dns.disableI ...

  9. 以太坊系列之七: p2p模块的dial--以太坊源码学习

    dial.go阅读手记 dial.go是负责和peer建立连接关系的地方,主要是实现 type dialer interface { /* peers已经有的结点 */ newTasks(runnin ...

  10. NPOI row.Cells[i] 的坑

    我有A行B列的EXCEL表格: 获取一行数据: IRow row=sheet.GetRow(i); 正常是这样的 row.Cells.Count = B; 但由于会存在没有激活的单元格,导致 row. ...