AngularJS中重新加载当前路由页面的方法


Posted in Javascript onMarch 09, 2018

这个问题同样困扰我很久,网上的回答五花八门,全都不能解决;终于在网上找很久,看到某大神的解决办法,整理作此分享;使用ui-router重新加载当前页面的问题。(ui-router版本需要是0.2.14以上的)

用angular做项目,会碰到需要点击菜单刷新当前页面,加载当前页面,但是同一个路由页面点击没反应;

假设我们的路由页面 app.toMenu ;

<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" ui-sref="app.toMenu" ui-sref-opts="{reload:true}">
<!-- 网上普遍都说这样刷新,但这个是整个页面也同时都刷新了 -->

其实,reload除了可以传递布尔类型型参数,还可以传string和object型参数,如果只是想刷新当前的路由页面,而不去连带刷新父路由,我们可以把reload的参数值设置为当前路由页面标识。

<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" ui-sref="app.toMenu" ui-sref-opts="{reload:'app.toMenu'}">
<!-- 这个方法刷新当前路由页面 -->

另外也可以用$state.reload();

$state.reload()是加载整个页面;

$state.reload('app.toMenu');加载当前页面;

<a href="" ng-click=" rel="external nofollow" reloadCurPage()">
<!-- controller里面 $scope -->
$scope.reloadCurPage = function(){
 $state.reload('app.toMenu');
}

注:如果标识是变量的话

<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" ui-sref="{{k.value}}" ui-sref-opts="{reload:'{{k.value}}'}">

以上这篇AngularJS中重新加载当前路由页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
5个javascript的数字格式化函数分享
Dec 07 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
js实现开启密码大写提示
Dec 21 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
详解js 创建对象的几种方法
Mar 08 Javascript
Element Badge标记的使用方法
Jul 27 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 #Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 #Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 #Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 #Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 #Javascript
详解react关于事件绑定this的四种方式
Mar 09 #Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 #Javascript
You might like
PHP生成便于打印的网页
2006/10/09 PHP
用PHP制作的意见反馈表源码
2007/03/11 PHP
PHP代码优化的53个细节
2014/03/03 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
斜45度寻路实现函数
2009/08/20 Javascript
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
详解Vue之计算属性
2020/06/20 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
keras topN显示,自编写代码案例
2020/07/03 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
AC Lens:购买隐形眼镜
2017/02/26 全球购物
就业协议书怎么填
2014/09/15 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
前台接待员岗位职责
2015/04/15 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫