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 相关文章推荐
jquery.ui.draggable中文文档
Nov 24 Javascript
Javascript的闭包
Dec 31 Javascript
jquery 插件开发备注
Aug 27 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
Jun 08 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
原生js轮播特效
May 18 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
layui select获取自定义属性方法
Aug 15 Javascript
详解React native fetch遇到的坑
Aug 30 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 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
mysql 字段类型说明
2007/04/27 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
JS控件的生命周期介绍
2012/10/22 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
Python变量作用范围实例分析
2015/07/07 Python
python实现员工管理系统
2018/01/11 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
Python多进程原理与用法分析
2018/08/21 Python
解决python flask中config配置管理的问题
2019/07/26 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
测试驱动开发的主要步骤是什么
2014/12/10 面试题
2014年纪检监察工作总结
2014/11/11 职场文书
统计员岗位职责
2015/02/11 职场文书
工作时间证明
2015/06/15 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
Nginx实现会话保持的两种方式
2022/03/18 Servers
mysql如何查询连续记录
2022/05/11 MySQL