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


Posted in Javascript onOctober 09, 2018

要求:

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

Javascript 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
javascript操作excel生成报表示例
May 08 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 #Javascript
angular4强制刷新视图的方法
Oct 09 #Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 #Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 #Javascript
vue router 源码概览案例分析
Oct 09 #Javascript
Angular4 Select选择改变事件的方法
Oct 09 #Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 #Javascript
You might like
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
js获取url中"?"后面的字串方法
2014/05/15 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
Python创建xml的方法
2015/03/10 Python
Python实现统计单词出现的个数
2015/05/28 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
Tornado 多进程实现分析详解
2018/01/12 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
Python函数基本使用原理详解
2020/03/19 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
Android面试题及答案
2015/09/04 面试题
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
历史学专业毕业生求职信
2013/09/27 职场文书
数控技术专业推荐信
2013/11/01 职场文书
工地门卫岗位职责
2013/12/30 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
导游词之五台山
2019/10/11 职场文书
Redis+AOP+自定义注解实现限流
2022/06/28 Redis