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; ...
随机推荐
- Cloud Design Patterns: Prescriptive Architecture Guidance for Cloud Applications
January 2014 Containing twenty-four design patterns and ten related guidance topics, this guide arti ...
- linux内存监控 free
free 命令详解: 执行命令后总共四行. 第一行: 列头 第二行: total 内存总数: 32881776 used 已经使用的内存数: 8324796 free 空闲的内存数: 24556980 ...
- 关于 href="\\#" 和 return false
href="\\#" 跳转到本页 return false 相当于不刷新 href="javascript:void(0)" 或者 href=" ...
- go-spew golang最强大的调试助手,没有之一
go内置的fmt.sprintf已经很强大了,但是和spew比起来还是相形见绌,这里来一个例子. import ( "fmt" "github.com/davecgh/g ...
- unix网络编程 str_cli epoll 非阻塞版本
unix网络编程 str_cli epoll 非阻塞版本 unix网络编程str_cli使用epoll实现讲了使用epoll配合阻塞io来实现str_cli,这个版本是配合非阻塞io. 可以看到采用非 ...
- 编码原则实例------c++程序设计原理与实践(进阶篇)
编码原则: 一般原则 预处理原则 命名和布局原则 类原则 函数和表达式原则 硬实时原则 关键系统原则 (硬实时原则.关键系统原则仅用于硬实时和关键系统程序设计) (严格原则都用一个大写字母R及其编号标 ...
- 基于CAS的单点登录实战(2)-- 搭建cas的php客户端
在这之前已经搭好了CAS服务端 基于CAS的单点登录实战(1)-- 搭建cas服务器 PHP-Client php-Client是官方支持的,去官网下个最新版就好了.phpCAS 接入很简单,解压放到 ...
- 深度剖析MQTT协议的整个通信流程
http://www.elecfans.com/d/587483.html MQTT,目前物联网的最主要的协议,基本所有收费的云平台都是基于MQTT协议,比如机智云,和所有的开放云平台比如中国移动的o ...
- mysql的innodb自增主键为什么不是连续的
图1 图1中是表t原有的数据,这个时候我们执行show create table t会看到如下输出,如图二所示现在的自增值是2,也就是下一个不指定主键值的插入的数据的主键就是2 图2 Innodb引擎 ...
- Python正则表达式匹配日期与时间
#!/usr/bin/env python # -*- coding: utf-8 -*- __author__ = 'Randy' import re from datetime import da ...