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 相关文章推荐
javascript标签在页面中的位置探讨
Apr 11 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
JS非空验证及邮箱验证的实例
Aug 11 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
小程序实现展开/收起的效果示例
Sep 22 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 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
全文搜索和替换
2006/10/09 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
PHP静态成员变量
2017/02/14 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
jquery.validate使用攻略 第二部
2010/07/01 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
js实现前面自动补全位数的方法
2018/10/10 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
Eclipse + Python 的安装与配置流程
2013/03/05 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
numpy基础教程之np.linalg
2019/02/12 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
几款好用的python工具库(小结)
2020/10/20 Python
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
幼儿园园长自我鉴定
2013/10/22 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
企业管理标语
2014/06/10 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫