编程 Javascript

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

Posted in Javascript onAugust 30, 2016

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

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

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

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

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

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

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

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

- Author -

紫日残月

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 面向对象全新理练之继承与多态

Dec 03 Javascript

Table冻结表头示例代码

Aug 20 Javascript

使用JQuery实现Ctrl+Enter提交表单的方法

Oct 22 Javascript

js数组常见操作及数组与字符串相互转化实例详解

Nov 10 Javascript

js获取及判断键盘按键的方法

Dec 01 Javascript

详解JS获取HTML DOM元素的8种方法

Jun 17 Javascript

使用原生js+canvas实现模拟心电图的实例

Sep 20 Javascript

细说webpack源码之compile流程-入口函数run

Dec 26 Javascript

vue-router 中 meta的用法详解

Nov 01 Javascript

javascript绘制简单钟表效果

Apr 07 Javascript

通过vue刷新左侧菜单栏操作

Aug 06 Javascript

Vue基本指令实例图文讲解

Feb 25 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判断网页是否gzip压缩

2013/06/25 PHP

PHP中ini_set和ini_get函数的用法小结

2014/02/18 PHP

thinkphp验证码显示不出来的解决方法

2014/03/29 PHP

PHP中file_put_contents追加和换行的实现方法

2017/04/01 PHP

如何简单地用YUI做JavaScript动画

2007/03/10 Javascript

javascript 词法作用域和闭包分析说明

2010/08/12 Javascript

基于jquery的button默认enter事件(回车事件)。

2011/05/18 Javascript

js获取上传文件大小示例代码

2014/04/10 Javascript

javascript与有限状态机详解

2014/05/08 Javascript

js数组中如何随机取出一个值

2014/06/13 Javascript

jQuery+jRange实现滑动选取数值范围特效

2015/03/14 Javascript

JavaScript动态提示输入框输入字数的方法

2015/07/27 Javascript

使用js复制链接中的部分文字的方法

2015/07/30 Javascript

Bootstrap教程JS插件滚动监听学习笔记分享

2016/05/18 Javascript

让浏览器崩溃的12行JS代码(DoS攻击分析及防御)

2016/10/10 Javascript

node.js基于mongodb的搜索分页示例

2017/01/22 Javascript

详解用webpack2.0构建vue2.0超详细精简版

2017/04/05 Javascript

详解AngularJS跨页面传值（ui-router）

2017/08/23 Javascript

ES6 更易于继承的类语法的使用

2019/02/11 Javascript

Element实现表格嵌套、多个表格共用一个表头的方法

2020/05/09 Javascript

[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场

2018/04/04 DOTA

利用信号如何监控Django模型对象字段值的变化详解

2017/11/27 Python

用python 批量更改图像尺寸到统一大小的方法

2018/03/31 Python

python 实现敏感词过滤的方法

2019/01/21 Python

详解Python Matplotlib解决绘图X轴值不按数组排序问题

2019/08/05 Python

Python Web框架之Django框架Form组件用法详解

2019/08/16 Python

windows 10 设定计划任务自动执行 python 脚本的方法

2019/09/11 Python

判断Threading.start新线程是否执行完毕的实例

2020/05/02 Python

如何用border-image实现文字气泡边框的示例代码

2020/01/21 HTML / CSS

数据库笔试题

2013/05/09 面试题

2014全国两会学习心得体会2000字

2014/03/10 职场文书

节电标语大全

2014/06/23 职场文书

爱祖国爱家乡演讲稿

2014/09/02 职场文书

领导班子三严三实对照检查材料

2014/09/25 职场文书

2014报到证办理个人委托书

2014/10/08 职场文书

Python数据可视化之Seaborn的安装及使用

2022/04/19 Python