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 相关文章推荐
基于jquery的15款幻灯片插件
Apr 10 Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
js在HTML的三种引用方式详解
Aug 29 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编程语言开发动态WAP页面
2006/10/09 PHP
简单的PHP图片上传程序
2008/03/27 PHP
深入php self与$this的详解
2013/06/08 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
php给数组赋值的实例方法
2019/09/26 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
跟老齐学Python之关于类的初步认识
2014/10/11 Python
Python常用随机数与随机字符串方法实例
2015/04/09 Python
Python字符串格式化
2015/06/15 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
Python延时操作实现方法示例
2018/08/14 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
python opencv实现图像边缘检测
2019/04/29 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
计算机专业职业生涯规划范文
2014/01/19 职场文书
创业计划书撰写原则
2014/01/25 职场文书
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫