Angular 怎么在加载中加入 Loading 提示框
[转自] 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 提示框的更多相关文章
- JS实现页面加载完毕之前loading提示效果
1.获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.docu ...
- js实现的页面加载完毕之前loading提示效果
页面加载readyState的五种状态 原文如下: 0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loadin ...
- 【datatable】正在加载中的信息提示
datatable插件 DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, ...
- 利用document的readyState去实现页面加载中的效果
打开新的网页时,为了增强友好性体验,告知用户网页正在加载数据需要呈现一个"页面加载中"之类的提示,只需要利用document就可以实现. 实现示例代码如下: <style&g ...
- 微信小程序之----加载中提示框loading
loading loading只有一个属性hidden .wxml <view> <loading hidden="{{hidden}}"> 加载中... ...
- 用Loading 加载中的整页加载来做蒙层
总结:遇见的bug 如何写一个蒙层 最初我打算的是自己写一个蒙层,但是写出来后, 不能够将整个屏幕全部覆盖.只能够覆盖 除[顶部导航] 和[左侧菜单栏] 于是我就使用了element-ui中的 [Lo ...
- ajax请求成功前,加载中loading显示
/*第一次刷新--非定时器刷新数据*/ var fistInitColumn = true; var getAllColumnDatas = function(){ var params = {}; ...
- layui的loading加载中
var load = layer.load(1, { content: '数据加载中', shade: [0.4, '#393D49'], // time: 10 * 1000, success: f ...
- android 加载中、无网络、无数据、出错 四种状态的代码封装
package com.weavey.loading.lib;import android.content.Context;import android.content.res.TypedArray; ...
随机推荐
- R语言安装包,切换镜像
source("http://bioconductor.org/biocLite.R") options(BioC_mirror="http://mirrors.ustc ...
- 数据库 MySQL 之 表操作、存储引擎
数据库 MySQL 之 表操作.存储引擎 浏览目录 创建(复制) 删除 修改 查询 存储引擎介绍 一.创建(复制) 1.语法: 1 2 3 4 5 CREATE TABLE 表名( 字段名1 ...
- URL 与 URI
http://localhost:8080/TEST_Servlet/ClientRequest/test?name=wr getRequestURL:http://localhost:8080/TE ...
- 加载 页面 中js 方法
js 文件中 var mingchen= mingchen|| { init: function (){ } }; 文件中 mingchen.init(); 注意问题: 在新加载 页面中 ...
- ajax 跨域名调用
在ajax 中要跨域名 请求的时候要注意 1. dataType: 'jsonp', 2. jsonp: 'callback', <script type="text/javascri ...
- webapi put 请求405问题
put 请求的时候 浏览器会像服务器发送两个请求 如何没做任何配置第一个options请求是会报错的 这是需要配置路由给options作响应 这时options请求就通过了,然后你们会看到你的put ...
- Time - Time-interval Measurements
public class TimeHelper { private long _start, _stop, _elapsed; /// <summary> /// 获取初始时间戳 /// ...
- firefox 59 无法使用 pac 代理上网
最近装了 firefox,电脑配置不太高,chrome 太吃内存了. 但是发现 SwitchyOmega的 pac 模式无法工作,这篇文章提到了两个思路, 其中network.dns.disableI ...
- 以太坊系列之七: p2p模块的dial--以太坊源码学习
dial.go阅读手记 dial.go是负责和peer建立连接关系的地方,主要是实现 type dialer interface { /* peers已经有的结点 */ newTasks(runnin ...
- NPOI row.Cells[i] 的坑
我有A行B列的EXCEL表格: 获取一行数据: IRow row=sheet.GetRow(i); 正常是这样的 row.Cells.Count = B; 但由于会存在没有激活的单元格,导致 row. ...