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 相关文章推荐
js活用事件触发对象动作
Aug 10 Javascript
利用jquery操作select下拉列表框的代码
Jun 04 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&闭包&减缓全局空间污染
Nov 16 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
简单的三步vuex入门
May 20 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
angular2实现统一的http请求头方法
Aug 13 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 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极大的增强功能和性能
2006/10/09 PHP
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
python中enumerate函数遍历元素用法分析
2016/03/11 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
卫校毕业生自我鉴定
2013/10/31 职场文书
会议接待欢迎词
2014/01/12 职场文书
高中美术教学反思
2014/01/19 职场文书
学年末自我鉴定
2014/01/21 职场文书
运动会入场词200字
2014/02/15 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers