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 克隆数组最简单的方法
Feb 12 Javascript
一个简单的js鼠标划过切换效果
Jun 30 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
删除select中所有option选项jquery代码
Aug 12 Javascript
jQuery大于号(>)选择器的作用解释
Jan 13 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 Javascript
JavaScript根据json生成html表格的示例代码
Oct 24 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
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
php实现httpclient类示例
2014/04/08 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
JS不完全国际化&本地化手册 之 理论篇
2016/09/27 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
python中查看变量内存地址的方法
2015/05/05 Python
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
Python configparser模块应用过程解析
2020/08/14 Python
python asyncio 协程库的使用
2021/01/21 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
幼师自我鉴定范文
2013/10/01 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
成本会计实训报告
2014/11/05 职场文书
入党转正介绍人意见
2015/06/03 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
Pandas 稀疏数据结构的实现
2021/07/25 Python
HttpClient实现表单提交上传文件
2022/08/14 Java/Android