Angular懒加载机制刷新后无法回退的快速解决方法


Posted in Javascript onAugust 30, 2016

今天在项目中遇到一个很奇怪的问题,使用oclazyload懒加载angular的模块,刷新页面后,单击回退按钮无法返回上一个页面.估计是使用懒加载机制销毁了angular内部的state关联,导致无法回到上一个state(单击回退按钮 ui-routre的 $stateChangeStart 事件都不会触发),当然这只是猜测,由于事件关系也没有去深入的探究源码.

angular懒加载机制刷新后无法回退的解决方案 :

通过查看angular(ionic)的源码发现$browser这个服务上有个onUrlChange方法,当我们从angular外部改变url地址时,会调用此方法中注册的事件处理函数,如下图所示:

Angular懒加载机制刷新后无法回退的快速解决方法

这样的话,就可以在程序入口注册一个函数

//当通过浏览器回退/前进按钮跳转state时,重新加载页面,如果用系统state,则不会进入此方法 
$browser.onUrlChange(function (url) { 
//TODO 解析url中的state,使用懒加载去加载state模块,实现页面刷新
});

通过这个函数就可以在回退和前进的时候重新去刷新页面了...

以上所述是小编给大家介绍的Angular懒加载机制刷新后无法回退的快速解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js事件冒泡实例分享(已测试)
Apr 23 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
浅析JavaScript中的typeof运算符
Nov 30 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
Vue组件tree实现树形菜单
Apr 13 Javascript
基于JavaScript实现五子棋游戏
Aug 26 Javascript
vue实现扫码功能
Jan 17 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 #Javascript
浅谈javascript中的Function和Arguments
Aug 30 #Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 #Javascript
Laravel中常见的错误与解决方法小结
Aug 30 #Javascript
js中常用的Tab切换效果(推荐)
Aug 30 #Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 #Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 #Javascript
You might like
PHP VS ASP
2006/10/09 PHP
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
js 通用javascript函数库整理
2011/08/14 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
JS中showModalDialog 的使用解析
2013/04/17 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
Python实现在线音乐播放器
2017/03/03 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
迎新晚会策划方案
2014/06/13 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
小学感恩节活动总结
2015/03/24 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
python实现简单的聊天小程序
2021/07/07 Python
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技