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 相关文章推荐
JavaScript中变量提升 Hoisting
Jul 03 Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
JavaScript Promise 用法
Jun 14 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
vue-router history模式下的微信分享小结
Jul 05 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
JavaScript实现PC端横向轮播图
Feb 07 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
基于mysql的论坛(1)
2006/10/09 PHP
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
jQuery实现多按钮单击变色
2014/11/27 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
python绘制随机网络图形示例
2019/11/21 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
一个SQL面试题
2014/08/21 面试题
启动一个线程是用run()还是start()
2016/12/25 面试题
成人大专生实习期的自我评价
2013/10/02 职场文书
会议邀请函范文
2014/01/09 职场文书
暂住证明怎么写
2015/06/19 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL