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应用的方法,AngularJS是一个非常具有人气的JavaScript框架,需要的朋友可以参考下
    2015-06-06
  • Angular resolve基础用法详解

    Angular resolve基础用法详解

    resolve保证了数据获取后再进行路由跳转,防止因为数据延迟而出现短暂的空组件情况,本文就介绍一下Angular resolve基础用法,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • angularjs中使用ng-bind-html和ng-include的实例

    angularjs中使用ng-bind-html和ng-include的实例

    下面小编就为大家带来一篇angularjs中使用ng-bind-html和ng-include的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • Angular 4 依赖注入学习教程之FactoryProvider的使用(四)

    Angular 4 依赖注入学习教程之FactoryProvider的使用(四)

    这篇文章主要给大家介绍了关于Angular 4 依赖注入之FactoryProvider使用的相关资料,文中介绍的非常详细,对大家学习或者使用Angular4具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • 实例解析angularjs的filter过滤器

    实例解析angularjs的filter过滤器

    本文对angularjs的filter过滤器进行系统介绍,附上实例解析,便于理解。具有很好的参考价值,需要的朋友可以看下
    2016-12-12
  • 使用AngularJS处理单选框和复选框的简单方法

    使用AngularJS处理单选框和复选框的简单方法

    这篇文章主要介绍了使用AngularJS处理单选框和复选框的方法,在AngularJS表单的基础之上编写起来非常简单,需要的朋友可以参考下
    2015-06-06
  • AngularJs  unit-testing(单元测试)详解

    AngularJs unit-testing(单元测试)详解

    本文主要介绍AngularJs unit-testing(单元测试)的内容,这里整理了单元测试的知识,及示例代码,有兴趣的朋友可以参考下
    2016-09-09
  • AngularJS的内置过滤器详解

    AngularJS的内置过滤器详解

    在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化,才能显示给用户。在angularjs中为我们提供了叫filter的指令,让我们能够很轻易就能做到着一些列的功能,angularjs内部为我们提供了number等很多内置的filter。
    2015-05-05
  • AngularJS 表达式详解及实例代码

    AngularJS 表达式详解及实例代码

    这篇文章主要介绍了AngularJS 表达式,这里整理了详细的资料,有需要的小伙伴可以参考下
    2016-09-09
  • 通过AngularJS实现图片上传及缩略图展示示例

    通过AngularJS实现图片上传及缩略图展示示例

    本篇文章主要介绍了通过AngularJS实现图片上传及缩略图展示,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01

最新评论