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('模板已经加载完成!');
});
angularjs -- 路由监听的更多相关文章
- angularjs路由监听,uirouter感知路由变化,解决uirouter路由监听不生效的问题
壹 ❀ 引 angularjs除了惊为天人的双向数据绑定外,路由也是出彩的一笔,通过路由配置,我们能在不发起页面跳转的情况下,对当前页内容进行整体更新,angularjs提供了ngRoute模块用于 ...
- 解决ui-router路由监听$stateChangeStart、$stateChangeSuccess、$stateChangeError不执行的问题
问题解答 angular1项目导入ui-router之后,使用路由监听,代码如下 angular.module('app', ['ui.router', 'ui.router.state.events ...
- vue路由监听及路由守卫
路由监听: //当一个组件被复用的时候,那么路由发生变化,但是页面上面的数据不会发生变化 新建one.vue 组件 作为home的子组件,在home.vue 中写遍历渲染页面 ,并用params传参, ...
- Vue路由监听
一.问题描述 描述:页面1showowner.vue跳转到页面2showuser.vue 需求:页面1的多个结点对应于一个页面2文件[页面2未展示] 问题:并不是页面一的一个结点对应一个页面二文件 处 ...
- vue的路由带参数和取参数,watch路由监听
1.写在html里 <router-link :to="{path:'/goldShop/goodsInfo',query: { id:item.id }}" class=& ...
- vue路由监听和参数监听
1.路由携带数据跳转 routerAction(hideDisplays, data) { switch (hideDisplays) { case "pubAccountMenu" ...
- 关于AngularJs中监听事件及脏循环的理解
可能很多刚入行或者刚学习的前端对于AngularJs中的一些事件或者概念感觉不理解或者没有思路,今天让我们一起来剖析一下AngularJs中的一些事件. AngularJs中对于的监听事件会用到一个s ...
- vue 路由监听
发现网上其实有很多种答案,但是测试之后发现很多都不行,或者写的不完整. 一.在app.vue组件内,增加监听$route,如下: watch: { $route(to, from) { console ...
- AngularJS - Watch 监听对象
<body> <div ng-app="myApp"> <div ng-controller="firstController"& ...
随机推荐
- 关于JSON基础的总结
本文总结自百度百科 JSON 语法规则 JSON 语法是 JavaScript 对象表示语法的子集. 数据在键值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 JSON 名称/值对 JSON 数 ...
- mysql ERROR 1045 (28000): Access denied for user 可能解决方法分析
在实际登录redmine的过程中,我们遇到了如下的error ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using ...
- spring boot整合Swagger2
Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化RESTful风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参数和模型紧密集成到服务器 ...
- Img与background的区别
今天做项目中,用background显示了二维码和一些文字,但显示到页面上时,二维码和图片都变得模糊了.于是将图片调整.放大,但在放大后,作为背景图片的它则显示不全,无奈之下用了backgroung- ...
- Python -- Gui编程 -- Qt库的使用 -- 配置资源文件
1.源文件(qtRes.py) import sys from PyQt4 import QtCore, QtGui, uic class MyDialog(QtGui.QDialog): def _ ...
- R语言---- 数据的基本运算
一.基本运算符号 1.基本数学计算 +.-.*./.^.%%(求模).%/%(整除)注意:求模运算两边若为小数,则整数和小数部分分别求模.例:5.6%%2.2 2.比较运算 >.<.> ...
- PyCharm2018专业版激活步骤
激活步骤: 1.更改hosts文件,2 获取注册码, 3 完成注册. 1. 更改host文件 hosts文件的路径 : c:\windows\system32\drivers\etc\hosts 将 ...
- php的error_log()记录日志
<?php date_default_timezone_set('PRC');//设置时区,否则会有警告 //把This s a error保存到/home/log-yyyy-MM-dd.txt ...
- [九省联考 2018]IIIDX
Description 题库链接 给你 \(n+1\) 个节点的一棵树,节点编号为 \(0\sim n\) , \(0\) 为根.边集为 \(\mathbb{E}=\left\{(u,v)\big|\ ...
- [转]VS2013中使用Git建立源代码管理
本文转自:https://blog.csdn.net/bodybo/article/details/38976549 第一次在VS2013中使用Git,也是第一次使用Git,各种不熟悉.百度各种使用经 ...