angularjs -- 路由监听
前几天,项目在做一个功能时需要在页面切换之前关闭正在执行的函数。尝试了几种方式都不行,最后想到既然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 -- 路由监听相关推荐
- angularjs路由监听,uirouter感知路由变化,解决uirouter路由监听不生效的问题
angularjs路由监听,uirouter感知路由变化,解决uirouter路由监听不生效的问题 参考文章: (1)angularjs路由监听,uirouter感知路由变化,解决uirouter路由 ...
- Vue + el-menu刷新选中 + 路由监听 + 路由重复点击
0. 整体代码: [App.vue] <template><div id="app"><HeaderPage :routerData="r ...
- flutter中state生命周期与app生命周期与路由监听
State生命周期 1.第一次展示到屏幕上时会依次调用当前element的构造函数,initState,didChangeDependencies,build 2.如果只是自己发生了更新,则只会回调b ...
- react路由配置,路由跳转与传值,路由监听
1.react路由配置 1.1 下载react的路由模块 (默认最新6.3, 如需使用5.x, 在模块名后加@5) npm install react-router-dom --save // 6.0 ...
- vue 路由监听 watch
一.监听路由从哪儿来到哪儿去 watch:{$route(to,from){console.log(to.path);} }, 二.监听路由变化获取新老路由信息 watch:{$route:{hand ...
- react路由守卫、路由监听等总结
1.路由守卫(拦截) react框架没有路由守卫功能,只能通过在路由里设置meta元字符实现路由拦截.路由拦截就是路由在发生变化时需要进行的拦截处理. 2.监听路由变化 方式: 1.路由下的内容组件通 ...
- angularjs $watch监听模型变化
$watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEqua ...
- AngularJS实时监听Html控件状态(值)变化
以 input 标签为例 Html: <input id="maxWatchCount" name="maxWatchCount" ng-model=&q ...
- react 路由监听
import { useLocation } from "react-router";const location = useLocation();useEffect(() =&g ...
最新文章
- 在RHEL4上安装subversion1.4.2
- LAN WAN WLAN 的区别
- 湖南师范大学c语言作业答案,2017年湖南师范大学物理与信息科学学院845C语言程序设计考研题库...
- 同时渲染两个世界:恐怖游戏《灵媒》背后的尖端技术
- 怎么设置tomcat的默认应用
- Given two binary trees, write a function to check if they areequal or not.
- oracle字符数量,Oracle中统计表中每行字段符合条件的数量
- 导出FLASH用反射的时候要注意的问题
- 暴力解决配置HTTPS后无法使用Hermit
- FPGA串口波特率计算方法
- android 支付宝第三方支付
- python抓取网页图片教程_Python实现简单网页图片抓取完整代码实例
- python3自动发送邮件并添加附件
- 【unity】遇到Multiple precompiled assemblies with the same name的解决方案
- Chrome 安装插件与使用技巧
- python打开pdf文档
- C初阶必写的C语言小游戏—扫雷,一看就会,看完就能写
- SQL手工注入漏洞测试(Db2数据库)
- 博主在阿里笔试中拿了0分,竟是因为分不清楚 Java 输入类 nextLine 与 next 两个方法的区别
- 一篇学完:GAMES101:现代计算机图形学入门 学习笔记