AngularJS监听路由的变化示例代码


Posted in Javascript onSeptember 23, 2016

话不多说,我们下面直接来看实现的示例代码

【一】Angular 路由状态发生改变时可以通过' $stateChangeStart '、' $stateChangeSuccess '、' $stateChangeError '监听,通过注入'$location'实现状态的管理

代码示例如下:

function run($ionicPlatform, $location, Service, $rootScope, $stateParams) { 
  //路由监听事件 
  $rootScope.$on('$stateChangeStart', 
    function(event, toState, toParams, fromState, fromParams) { 
     console.log(event); 
     console.log(toState); 
     console.log(toParams); 
     console.log(fromState); 
     console.log(fromParams); 
     if (toState.name == "homePage") { 
      //获取参数之后可以调请求判断需要渲染什么页面,渲染不同的页面通过 $location 实现 
      if (toParams.id == 10) { 
       //$location.path();//获取路由地址 
       // $location.path('/validation').replace(); 
       // event.preventDefault()可以阻止模板解析 
      } 
     } 
    }) 
   // stateChangeSuccess 当模板解析完成后触发 
  $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) { 
 
  }) 
 
  // $stateChangeError 当模板解析过程中发生错误时触发 
  $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) { 
 
  }) 
 }

【2】在页面渲染中 可通过' $viewContentLoading '和 ' $viewContentLoaded '监听页面渲染状态:渲染开始和渲染结束。

(在控制器中添加以下代码实现监听)

// $viewContentLoading- 当视图开始加载,DOM渲染完成之前触发,该事件将在$scope链上广播此事件。 
scope.$watch('$viewContentLoading',function(event, viewConfig){ 
 alert('模板加载完成前'); 
}); 
//$viewContentLoaded- 当视图加载完成,DOM渲染完成之后触发,视图所在的$scope发出该事件。 
$scope.$watch('$viewContentLoaded',function(event){ 
  alert('模板加载完成后'); 
});

总结

以上就是这篇文章的全部内容,希望能对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
javascript定时保存表单数据的代码
Mar 17 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
layui 优化button按钮和弹出框的方法
Aug 15 Javascript
JS class语法糖的深入剖析
Jul 07 Javascript
JavaScript实现简单的音乐播放器
Aug 14 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 #Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 #Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 #Javascript
form表单转Json提交的方法(推荐)
Sep 23 #Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 #Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 #Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 #Javascript
You might like
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
php strftime函数的详细用法
2018/06/21 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
javascript add event remove event
2008/04/07 Javascript
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
JavaScript中Function详解
2015/02/27 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
理解AngularJs指令
2015/12/10 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python os.path模块常用方法实例详解
2018/09/16 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
python绘制地震散点图
2019/06/18 Python
教师节商场活动方案
2014/02/13 职场文书
安全例会汇报材料
2014/08/23 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
公司年夜饭通知
2015/04/25 职场文书
开场白怎么写
2015/06/01 职场文书
趣味运动会加油词
2015/07/18 职场文书
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL