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返回前一页面时刷新一次前面页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Angularjs分页查询的实现

    Angularjs分页查询的实现

    本文给大家分享angularjs实现分页查询功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
    2017-02-02
  • Angular指令之restict匹配模式的详解

    Angular指令之restict匹配模式的详解

    这篇文章主要介绍了Angular指令之restict匹配模式的详解的相关资料,这里对Angularjs 中restict匹配模式进行详解并列举了四种模式进行比较,需要的朋友可以参考下
    2017-07-07
  • 强大的 Angular 表单验证功能详细介绍

    强大的 Angular 表单验证功能详细介绍

    本篇文章主要介绍了强大的 Angular 表单验证功能详细介绍,使用 Angular 的内置表单校验能够完成绝大多数的业务场景的校验需求,有兴趣的可以了解一下
    2017-05-05
  • 详解@angular/cli 改变默认启动端口两种方式

    详解@angular/cli 改变默认启动端口两种方式

    这篇文章主要介绍了详解@angular/cli 改变默认启动端口两种方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • Angular7创建项目、组件、服务以及服务的使用

    Angular7创建项目、组件、服务以及服务的使用

    这篇文章主要介绍了Angular7创建项目、组件、服务以及服务的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • 详解Angularjs filter过滤器

    详解Angularjs filter过滤器

    这篇文章主要介绍了angularjs filter过滤器的相关资料,需要的朋友可以参考下
    2016-02-02
  • 深入探究AngularJS框架中Scope对象的超级教程

    深入探究AngularJS框架中Scope对象的超级教程

    这篇文章主要介绍了AngularJS框架中Scope对象使用的相关学习教程,包括其和rootscope的区别介绍,需要的朋友可以参考下
    2016-01-01
  • AngularJS 中的事件详解

    AngularJS 中的事件详解

    本文主要介绍AngularJS 事件,这里整理了相关资料,比较详细的介绍了AngularJS的使用方法,有需要的小伙伴参考下
    2016-07-07
  • AngularJS 所有版本下载地址

    AngularJS 所有版本下载地址

    这篇文章主要介绍了 AngularJS 所有版本下载地址的相关资料,需要的朋友可以参考下
    2016-09-09
  • Angular1.x复杂指令实例详解

    Angular1.x复杂指令实例详解

    这篇文章主要介绍了Angular1.x复杂指令,结合实例形式分析了指令的使用、模板指令、指令的作用域等概念与具体使用技巧,需要的朋友可以参考下
    2017-03-03

最新评论