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字符编码函数区别分析
Dec 28 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
多个js毫秒倒计时同时进行效果
Jan 05 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
js实现rem自动匹配计算font-size的示例
Nov 18 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
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错误日志简单配置方法
2016/07/11 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
python标准库OS模块详解
2020/03/10 Python
vue常用指令代码实例总结
2020/03/16 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
毕业生个人投资创业计划书
2014/01/04 职场文书
三好学生事迹材料
2014/12/24 职场文书
华清池导游词
2015/02/02 职场文书
初中运动会前导词
2015/07/20 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
七年级数学教学反思
2016/02/17 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python