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 相关文章推荐
获取焦点时,利用js定时器设定时间执行动作
Apr 02 Javascript
js 编程笔记 无名函数
Jun 28 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 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
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
php防止sql注入简单分析
2015/03/18 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
javascript顺序加载图片的方法
2015/07/18 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
React组件生命周期详解
2017/07/03 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
详解supervisor使用教程
2017/11/21 Python
python实现Flappy Bird源码
2018/12/24 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
python 解决函数返回return的问题
2020/12/05 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
一年级语文教学反思
2014/02/13 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP
python字符串的一些常见实用操作
2022/04/06 Python
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python