ionic 页面加载事件及loading动画
页面加载完成事件(非刷新情况下,页面切换是不会重复触发此事件的,只在第一次进入页面时触发,需要重复触发的话请使用 $ionicView.enter 事件)
angular.module('app.controllers', [])
.controller('page6Ctrl', ['$scope', '$http', '$stateParams', '$ionicLoading',
// The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function($scope, $http, $stateParams, $ionicLoading) {
$scope.$on('$ionicView.loaded', function(event, data) {
$ionicLoading.show();
$http.get("js/123.json")
.success(function(res) {
$ionicLoading.hide();
});
});
}
])
其他事件如下:
$ionicView.loaded |
The view has loaded. This event only happens once per view being created and added to the DOM. If a view leaves but is cached, then this event will not fire again on a subsequent viewing. The loaded event is good place to put your setup code for the view; however, it is not the recommended event to listen to when a view becomes active. |
$ionicView.enter |
The view has fully entered and is now the active view. This event will fire, whether it was the first load or a cached view. |
$ionicView.leave |
The view has finished leaving and is no longer the active view. This event will fire, whether it is cached or destroyed. |
$ionicView.beforeEnter |
The view is about to enter and become the active view. |
$ionicView.beforeLeave |
The view is about to leave and no longer be the active view. |
$ionicView.afterEnter |
The view has fully entered and is now the active view. |
$ionicView.afterLeave |
The view has finished leaving and is no longer the active view. |
$ionicView.unloaded |
The view's controller has been destroyed and its element has been removed from the DOM. |
$ionicParentView.enter |
The parent view has fully entered and is now the active view. This event will fire, whether it was the first load or a cached view. |
$ionicParentView.leave |
The parent view has finished leaving and is no longer the active view. This event will fire, whether it is cached or destroyed. |
$ionicParentView.beforeEnter |
The parent view is about to enter and become the active view. |
$ionicParentView.beforeLeave |
The parent view is about to leave and no longer be the active view. |
$ionicParentView.afterEnter |
The parent view has fully entered and is now the active view. |
$ionicParentView.afterLeave |
The parent view has finished leaving and is no longer the active view. |
官方文档:http://ionicframework.com/docs/api/directive/ionView/
关于$http和$ionicLoading对象,要在控制器使用ionic系统对象的时候,只需要在第二参数里加入变量,然后在最后的函数参数里也加入参数就可以了

ionic 页面加载事件及loading动画的更多相关文章
- 一个等待页面加载完毕的loading动画
1 html 部分 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" ...
- 从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 页面加载时的div动画
用@keyframes(动画),实现页面加载时的div动画(不要用js控制,因为当页面加载的时候,js还不一定可以使用) 可以在https://daneden.github.io/animate.cs ...
- Ionic页面加载前 ionic页面加载完成 ionic页面销毁执行的事件
ionic 中$ionicView.beforeEnter(页面刚加载前) $ionicView.afterEnter (页面加载完成) $destroy(页面销毁) 广播事件 //ionic c ...
- JS实现页面加载完毕之前loading提示效果
1.获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.docu ...
- jQuery 页面加载事件
页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onload ...
- JavaScript 之 页面加载事件
一.onload 加载事件 onload 是 window 对象的一个事件,也可以省略 window 直接使用. 常用方式: <head><script> windown.on ...
- js实现的页面加载完毕之前loading提示效果
页面加载readyState的五种状态 原文如下: 0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loadin ...
- 所有DOM元素加载之前执行的页面加载事件[jquery]
<script type="text/javascript"> (function() { alert("DOM还没加载"); })(jQuery) ...
随机推荐
- Ubuntu12.04下apache服务器的安装也配置
安装步骤 1.下载httpd http://httpd.apache.org/ 2.解压缩httpd tar vxzf httpd-2.4.6.tar.gz 3.安装httpd 进入解压缩后的目录 c ...
- Java web项目中java.lang.ClassNotFoundException: com.mysql.jdbc.Driver
原来是tomcat找不到MYSQL JAR包的问题.后来又把mysql-connector-java-5.1.7-bin.jar导入到tomcat的lib目录下面就ok了,嘿…… 在java项目中,只 ...
- 也谈免拆机破解中兴B860av1.1(解决不能安装软件/解决遥控)
20170221更新 部分用户(自己恢复出厂测试过),操作后仍然无法直接在当贝市场安装应用了, 在第8条,最后两步,先改为中国通用市场,后面再改为未知局方. 如果开机想优先启动当贝桌面 ...
- js队列的实现问题
所谓队列就是排队的序列问题,有出有进,比如在银行排队办理业务,一般都是前一个办理完成后下一个自动进入队列 <script> /* * 模拟队列 */ var Qu ={}; //构造函数 ...
- Augustus安装问题 (3.0 以上都适用)
augustus 3.2 (3.3) 编译失败 原因是依赖boost库,而且需要bamtools,从而导致编译失败 报错1: $ make mkdir -p bincd src && ...
- C#基础-获得当前程序的 空间名.类名.方法名
string typeName = this.GetType().ToString();//空间名.类名 string typeName = this.GetType().Name;//类名 new ...
- ps -a,job,netstat,daemons
kill -9是强制 -15是正常后执行 进程中的数据都写到 /proc/*这个目录下 进程 ps -l aux -lA zxjf(进程树) job ...
- Charles安装包及破解包下载地址
Charles安装包及破解包下载地址 http://xclient.info/s/charles.html?_=baf317d2a9932afca9b32c327f8a34c9
- gulp配置安装使用
安装 $ npm install gulp -g //全局安装gulp,让你可存取gulp的CLI //接着需要在本地端的专案进行安装,cd到专案根目录,执行 $ npm install gulp - ...
- Session和几种状态保持方案理解
一.术语session 在我的经验里,session这个词被滥用的程度大概仅次于transaction,更加有趣的是transaction与session在某些语境下的含义是相同的. session, ...