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 相关文章推荐
一行代码告别document.getElementById
Jun 01 Javascript
js校验表单后提交表单的三种方法总结
Feb 28 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
学习JavaScript设计模式之状态模式
Jan 08 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
微信小程序组件传值图示过程详解
Jul 31 Javascript
微信小程序选择图片控件
Jan 19 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和ACCESS写聊天室(十)
2006/10/09 PHP
PHP 数据结构 算法 三元组 Triplet
2011/07/02 PHP
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
php最简单的删除目录与文件实现方法
2014/11/28 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
使用grappelli为django admin后台添加模板
2014/11/18 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
行政助理岗位职责
2013/11/10 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
网站客服岗位职责
2014/04/05 职场文书
助学贷款贫困证明
2014/09/23 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
教师考核鉴定意见
2015/06/05 职场文书
超市员工管理制度
2015/08/06 职场文书