Angular懒加载机制刷新后无法回退的快速解决方法
更新时间：2016年08月30日 15:50:33 作者：紫日残月
使用oclazyload懒加载angular的模块,刷新页面后,单击回退按钮无法返回上一个页面.怎么回事呢？下面小编给大家带来了angular懒加载机制刷新后无法回退的快速解决方法，非常不错，感兴趣的朋友参考下
今天在项目中遇到一个很奇怪的问题,使用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版本在其生命周期中都经历了各个阶段。组件在Angular中起着关键作用; 在这里，本文将讨论Angular中的组件生命周期以及它们如何影响框架所有版本的生命周期。2021-05-05
指令（Directives）是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令，但还是经常需要创建应用特定的指令2016-03-03
这篇文章主要介绍了AngularJS的HTML DOM支持情况,包括ng-hide和ng-click指令的使用,需要的朋友可以参考下2015-06-06
这篇文章主要为大家详细介绍了AngularJs分页插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-06-06
AngularJS报错$apply already in progress的解决方法分析
这篇文章主要介绍了AngularJS报错$apply already in progress的解决方法,较为详细的分析了报错$apply already in progress的原理、处理技巧与相关注意事项,需要的朋友可以参考下2017-01-01
本篇文章主要介绍了Angular实现预加载延迟模块的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
本篇文章主要介绍了Angular 5 给组件本身的标签添加样式class的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
AngularJS在$scope变量中使用脏值检查来实现了数据双向绑定。和Ember.js数据双向绑定中动态设施setter和getter不同，脏治检查允许AngularJS监视那些存在或者不存在的变量。2015-09-09
下面小编就为大家带来一篇angular ng-repeat数组中的数组实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。本文重点给大家介绍AngularJs页面筛选标签小功能，非常不错，需要的朋友可以参考下2016-08-08
最新评论