前几天,项目在做一个功能时需要在页面切换之前关闭正在执行的函数。尝试了几种方式都不行,最后想到既然angularjs是通过理由切换页面,那就在路由上面做文章吧。AngularJS在路由发生改变时,可以通过路由事件来监听路由是否发生了改变。常用的是状态包括 $stateChangeStart,$stateChangeSuccess,$stateChangeError,测试代码以及注释如下:

var app = angular.module("app", []);   //定义app
app.run(['$rootScope', '$location', function ($rootScope, $location) {   //需要注入服务$rootScope;$location在这可要可不要,这里用来查看获取新的路由链接//路由监听事件$rootScope.$on('$stateChangeStart',function (event, toState, toParams, fromState, fromParams) {alert("路由的状态变化开始!");console.log('route begin change');});// stateChangeSuccess  当模板解析完成后触发$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {alert("路由的状态变化成功!");console.log('route have already changed :' + $location.path());});// $stateChangeError  当模板解析过程中发生错误时触发$rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {alert("路由的状态变化失败!");console.log('route changed failed:');})
}]);

  在测试时顺手截了几张图,直观判断:

    从China路由切换到Today:点击Today -> 路由的状态变化开始 -> 路由的状态变化成功 -> 新页面Today渲染;而且可以看到新获取到的路由新链接

    

    

    

    

    Today路由切换到China路由,方式和步骤相同。

    

    

    

   注意:在测试的过程中,我先用的状态字段是$routeStartChange和$routeChangeSuccess,但是代码没有执行,度娘了下才发现,这两个关键字是ng1在1.5版本之前的,测试时用的1.5以后的版本,所以代码不执行。

    如果有用到1.5之前版本的,可以试试下面代码:

var app = angular.module("app", []);   //定义app
app.run(['$rootScope', '$location', function($rootScope, $location) {  //需要注入服务$rootScope;$location在这可要可不要,这里用来查看获取新的路由链接/* 监听路由的状态变化 */$rootScope.$on('$routeChangeStart', function(evt, next, current){alert("路由的状态变化开始!");console.log('route begin change');});/* 路由的状态变化成功 */$rootScope.$on('$routeChangeSuccess', function(evt, current, previous) {alert("路由的状态变化成功!");console.log('route have already changed :'+$location.path());});
}]);

  页面的加载渲染监听:路由的切换可以监听了,那么顺便记一下页面的加载渲染监听:

  // 在页面渲染中可通过$viewContentLoading$viewContentLoaded监听页面渲染状态:$viewContentLoading(渲染开始)和$viewContentLoaded(渲染结束)。(在控制器中添加以下代码实现监听)

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

转载于:https://www.cnblogs.com/donghuang/p/8378666.html

angularjs -- 路由监听相关推荐

  1. angularjs路由监听,uirouter感知路由变化,解决uirouter路由监听不生效的问题

    angularjs路由监听,uirouter感知路由变化,解决uirouter路由监听不生效的问题 参考文章: (1)angularjs路由监听,uirouter感知路由变化,解决uirouter路由 ...

  2. Vue + el-menu刷新选中 + 路由监听 + 路由重复点击

    0. 整体代码:  [App.vue] <template><div id="app"><HeaderPage :routerData="r ...

  3. flutter中state生命周期与app生命周期与路由监听

    State生命周期 1.第一次展示到屏幕上时会依次调用当前element的构造函数,initState,didChangeDependencies,build 2.如果只是自己发生了更新,则只会回调b ...

  4. react路由配置,路由跳转与传值,路由监听

    1.react路由配置 1.1 下载react的路由模块 (默认最新6.3, 如需使用5.x, 在模块名后加@5) npm install react-router-dom --save // 6.0 ...

  5. vue 路由监听 watch

    一.监听路由从哪儿来到哪儿去 watch:{$route(to,from){console.log(to.path);} }, 二.监听路由变化获取新老路由信息 watch:{$route:{hand ...

  6. react路由守卫、路由监听等总结

    1.路由守卫(拦截) react框架没有路由守卫功能,只能通过在路由里设置meta元字符实现路由拦截.路由拦截就是路由在发生变化时需要进行的拦截处理. 2.监听路由变化 方式: 1.路由下的内容组件通 ...

  7. angularjs $watch监听模型变化

    $watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEqua ...

  8. AngularJS实时监听Html控件状态(值)变化

    以 input 标签为例 Html: <input id="maxWatchCount" name="maxWatchCount" ng-model=&q ...

  9. react 路由监听

    import { useLocation } from "react-router";const location = useLocation();useEffect(() =&g ...

最新文章

  1. 在RHEL4上安装subversion1.4.2
  2. LAN WAN WLAN 的区别
  3. 湖南师范大学c语言作业答案,2017年湖南师范大学物理与信息科学学院845C语言程序设计考研题库...
  4. 同时渲染两个世界:恐怖游戏《灵媒》背后的尖端技术
  5. 怎么设置tomcat的默认应用
  6. Given two binary trees, write a function to check if they areequal or not.
  7. oracle字符数量,Oracle中统计表中每行字段符合条件的数量
  8. 导出FLASH用反射的时候要注意的问题
  9. 暴力解决配置HTTPS后无法使用Hermit
  10. FPGA串口波特率计算方法
  11. android 支付宝第三方支付
  12. python抓取网页图片教程_Python实现简单网页图片抓取完整代码实例
  13. python3自动发送邮件并添加附件
  14. 【unity】遇到Multiple precompiled assemblies with the same name的解决方案
  15. Chrome 安装插件与使用技巧
  16. python打开pdf文档
  17. C初阶必写的C语言小游戏—扫雷,一看就会,看完就能写
  18. SQL手工注入漏洞测试(Db2数据库)
  19. 博主在阿里笔试中拿了0分,竟是因为分不清楚 Java 输入类 nextLine 与 next 两个方法的区别
  20. 一篇学完:GAMES101:现代计算机图形学入门 学习笔记

热门文章

  1. 摘之知乎网友...PHYTIN学习
  2. 关于过往与未来的思考
  3. Python之Pandas库学习(一):简介
  4. iOS开发中怎么样使用激光推送
  5. 关于GPU-driver for linux的资料
  6. 【C++ Primer学习笔记】第1章:快速入门
  7. 看清上市公司的财务分析
  8. 利用OpenCV的级联分类器类CascadeClassifier和Haar特征实现人脸区域的检测
  9. linux无任务内存被占满,centos服务器CPU被GC task占满,程序无内存溢出
  10. Java线程同步机制synchronized关键字的理解