AngularJs返回前一页面时刷新一次前面页面的方法

 更新时间:2018年10月09日 14:34:02   作者:ywltoread   我要评论

今天小编就为大家分享一篇AngularJs返回前一页面时刷新一次前面页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

要求:

页面A进入到页面B,在页面B处理完后返回页面A,页面A里的数据应该动态的减去一条,但由于一般情况下页面是缓存起来的,返回A后读取的是缓存静态页面,里面显示的数据不会减少。应客户要求,需要重新加载一次数据,达到页面A可以刷新数据目的。

研究过程:

从网上寻找发现,有一个方法可以获取到当前页面的URL:$location

以 ‘http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash' 这个路径为例:

1. 获取当前完整的url路径:

$location.absUrl():
// http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash

2. 获取当前url路径(当前url#后面的内容,包括参数和哈希值):

$location.url();
// /foo?name=bunny#myhash

3. 获取当前url的子路径(也就是当前url#后面的内容,不包括参数):

$location.path()
// /foo

4. 获取当前url的协议(比如http,https)$location.protocol()

$location.protocol()
// http

5. 获取当前url的主机名

$location.host()
// localhost

6. 获取当前url的端口

$location.port()
// 80 (这里就是wamp的默认端口号)

获取到当前页的URL后,把它赋给全局变量,当URL变化时,刷新前一页面即可

parent.location.reload(); //该方法可用于刷新前面所以页面

之后继续在网上找有没有更好的办法,发现了一个可以直接使用的方法:

这两个事件分别发生在当url开始发生改变,以及url改变完成.他们都被绑定在$rootScope里面:

$rootScope.$on('$locationChangeStart',function(){
  console.log('开始改变$location')
});
$rootScope.$on('$locationChangeSuccess',function(){
  console.log('结束改变$location')
});

之后写进代码里做了验证,验证结果可用。写法为:

$rootScope.$on('$locationChangeSuccess',function(){//返回前页时,刷新前页
 parent.location.reload(); 
});

以上这篇AngularJs返回前一页面时刷新一次前面页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • angular动态表单制作

    angular动态表单制作

    通过实例代码给大家详细讲述了angular动态表单的制作方法,对此有需要的朋友参考下。
    2018-02-02
  • 详解angularJs中关于ng-class的三种使用方式说明

    详解angularJs中关于ng-class的三种使用方式说明

    本篇文章主要介绍了angularJs中关于ng-class的三种使用方式说明,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 基于AngularJS实现iOS8自带的计算器

    基于AngularJS实现iOS8自带的计算器

    这篇文章的主要内容是使用angularjs实现一个计算器,是一个仿iOS8风格的计算器,功能基本和iOS自带的计算器是一致的。有需要的朋友们可以参考借鉴。
    2016-09-09
  • 自学实现angularjs依赖注入

    自学实现angularjs依赖注入

    这篇文章主要为大家详细介绍了angularjs依赖注入的自己成果,如何实现angularjs依赖注入,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • AngularJS指令用法详解

    AngularJS指令用法详解

    这篇文章主要介绍了AngularJS指令用法,较为详细的分析了AngularJS指令的功能、用法及自定义指令的相关实现技巧,需要的朋友可以参考下
    2016-11-11
  • Angular2开发——组件规划篇

    Angular2开发——组件规划篇

    本文主要介绍了Angular2组件的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • AngularJS 应用身份认证的技巧总结

    AngularJS 应用身份认证的技巧总结

    这篇文章主要介绍了AngularJS 应用身份认证的技巧总结,具有一定的参考价值,有需要的可以了解一下。
    2016-11-11
  • 实例剖析AngularJS框架中数据的双向绑定运用

    实例剖析AngularJS框架中数据的双向绑定运用

    这篇文章主要介绍了AngularJS框架中数据的双向绑定运用实例,包括数据绑定中的关键函数与监听器触发的相关讲解,需要的朋友可以参考下
    2016-03-03
  • Angular.js去除页面中显示的空行方法示例

    Angular.js去除页面中显示的空行方法示例

    这篇文章主要介绍了Angular.js去除页面中显示的空行方法,文中给出了详细的示例代码供大家参考学习,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-03-03
  • AngularJS手动表单验证

    AngularJS手动表单验证

    这篇文章主要介绍了AngularJS手动表单验证的相关资料,AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证,本文重点介绍AngularJS手动表单验证,感兴趣的小伙伴们可以参考一下
    2016-02-02

最新评论