解决ui-router路由监听$stateChangeStart、$stateChangeSuccess、$stateChangeError不执行的问题
问题解答
angular1项目导入ui-router之后,使用路由监听,代码如下
angular.module("app")
.run(['$rootScope', function ($rootScope) {
// 监听路由开始时触发
$rootScope.$on('$stateChangeStart', function () {}
// 监听路由成功时触发
$rootScope.$on('$stateChangeSuccess', function () {}
// 监听路由出现错误时触发
$rootScope.$on('$stateChangeStart', function () {}
})
}])
当切换路由的时候,原本应该会监听到路由的变化,但是实际却没有走这个路由监听器,这是为什么呢?答案如下:
这时需要在index.html导入一个stateEvents.js库文件,解决路由监听不到的问题(PS:必须在angular.module主模块下注入'ui.router.state.events')
附上ui-router官方教程地址:https://ui-router.github.io/ng1/
附上stateEvents.js官方教程地址:https://ui-router.github.io/ng1/docs/latest/modules/ng1_state_events.html#_statechangeerror
参数解读
根据stateEvents.js官方教程地址,路由监听提供的参数部分翻译
event: 该事件的基本信息
toState: 得到当前路由的信息,比如路由名称,url,视图的控制器,模板路径等
toParams: 得到当前路由的参数
fromState: 得到上一个路由的信息,比如路由名称,url,视图的控制器,模板路径等
fromParams:得到上一个路由的参数
后记
如有不对的地方,还望大家指正,共同进步
解决ui-router路由监听$stateChangeStart、$stateChangeSuccess、$stateChangeError不执行的问题的更多相关文章
- Vue路由监听
一.问题描述 描述:页面1showowner.vue跳转到页面2showuser.vue 需求:页面1的多个结点对应于一个页面2文件[页面2未展示] 问题:并不是页面一的一个结点对应一个页面二文件 处 ...
- angular ui.router 路由传参数
angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...
- vue的路由带参数和取参数,watch路由监听
1.写在html里 <router-link :to="{path:'/goldShop/goodsInfo',query: { id:item.id }}" class=& ...
- angularjs -- 路由监听
前几天,项目在做一个功能时需要在页面切换之前关闭正在执行的函数.尝试了几种方式都不行,最后想到既然angularjs是通过理由切换页面,那就在路由上面做文章吧.AngularJS在路由发生改变时,可以 ...
- vue 路由监听
发现网上其实有很多种答案,但是测试之后发现很多都不行,或者写的不完整. 一.在app.vue组件内,增加监听$route,如下: watch: { $route(to, from) { console ...
- Angularjs ui router,路由嵌套 父controller执行问题
解决方式来源:https://stackoverflow.com/questions/25316591/angularjs-ui-router-state-reload-child-state-onl ...
- UI EventSystem事件监听
Unity5.0 EventSystem事件系统的详细说明 一.EventSystem对象的说明 当我们在场景中创建任一UI对象后,Hierarchy面板中都可以看到系统自动创建了对象EventSys ...
- vue路由钩子拦截器beforeEach和afterEach及页面路由变化路由监听
在路由跳转的时候,我们需要一些权限判断或者其他操作.这个时候就需要使用路由的钩子函数. 定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数. 总体来讲vue里面提供了三大类钩子 ...
- 完美解决android软键盘监听
最近在做应用性能调优,发现在一个包含有输入框的Activity中,当软键盘弹出的时候,如果直接finish掉此Activity,那么在返回到上一个Activity时,界面的渲染会由于软键盘没有及时的收 ...
随机推荐
- 应用监控CAT之cat-home源码阅读(三)
上两章从点到点讲了,cat-client 到 cat-consumer 的请求处理过程,但是怎么样让我们监控给人看到呢?那么就需要一个展示的后台了,也就是本章要讲的 cat-home 模块 ! 带 ...
- TX-LCN分布式事务Demo实战
1. TX-LCN分布式事务Demo实战 1.1. 原理介绍 1.1.1. 事务控制原理 TX-LCN由两大模块组成, TxClient.TxManager,TxClient作为模块的依赖框架,提供T ...
- 【Spark调优】聚合操作数据倾斜解决方案
[使用场景] 对RDD执行reduceByKey等聚合类shuffle算子或者在Spark SQL中使用group by语句进行分组聚合时,经过sample或日志.界面定位,发生了数据倾斜. [解决方 ...
- vue好用的图片查看器(v-viewer插件)
在开发中,经常会遇到这样的需求,就是点击图片,能够放大预览.在网上找到了一款很好用的插件.拿来即用,不需要复杂的配置.特此记录下(这里只是针对于在vue脚手架下的使用方法). 1.安装依赖包. npm ...
- 2012-2014 三年浙江 acm 省赛 题目 分类
The 9th Zhejiang Provincial Collegiate Programming Contest A Taxi Fare 25.57% (166/649) (水 ...
- leetcode — spiral-matrix
import java.util.Arrays; /** * Source : https://oj.leetcode.com/problems/spiral-matrix/ * * Created ...
- 【Python】正则表达式简单教程
说明:本文主要是根据廖雪峰网站的正则表达式教程学习,并根据需要做了少许修改,此处记录下来以备后续查看. <Python正则表达式纯代码极简教程>链接:https://www.cnblogs ...
- 踏上编程大道 从 Python 开始成为神级 Coder
电脑科学,或说计算机科学,是个在美国不断成长的产业,薪资报酬也很高.市场上永远存在著对天赋异禀的新锐工程师的需求,这就是为什麽「学习程式语言」一直是一件有魅力的事情. 但是,就跟任何技能一样,我们常常 ...
- TensorFlow中的通信机制——Rendezvous(二)gRPC传输
背景 [作者:DeepLearningStack,阿里巴巴算法工程师,开源TensorFlow Contributor] 本篇是TensorFlow通信机制系列的第二篇文章,主要梳理使用gRPC网络传 ...
- Perl面向对象(2):对象
本系列: Perl面向对象(1):从代码复用开始 Perl面向对象(2):对象 Perl面向对象(3):解构--对象销毁 第3篇依赖于第2篇,第2篇依赖于1篇. 已有的代码结构 现在有父类Animal ...