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学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
一个基于jquery的图片切换效果
Jul 06 Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
详谈javascript异步编程
Feb 21 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
layui的table中显示图片方法
Aug 17 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
JavaScript中跨域问题的深入理解
Mar 04 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
3.从实例开始
2006/10/09 PHP
模仿OSO的论坛(五)
2006/10/09 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
Vue快速实现通用表单验证功能
2019/12/05 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
JS实现简易日历效果
2021/01/25 Javascript
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
Python 字符串与数字输出方法
2018/07/16 Python
Python全排列操作实例分析
2018/07/24 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
毕业生自我鉴定实例
2014/01/21 职场文书
遗体告别仪式答谢词
2014/01/23 职场文书
乡镇干部十八大感言
2014/02/17 职场文书
公司副总经理任命书
2014/06/05 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
运动会新闻稿
2015/07/17 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
详解SQL报错盲注
2022/07/23 SQL Server