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 相关文章推荐
Jquery升级新版本后选择器的语法问题
Jun 02 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
php+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
Python与C/C++的相互调用案例
2021/03/04 Python
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
集体备课反思
2014/02/12 职场文书
校园环保建议书
2014/05/14 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
Java获取字符串编码格式实现思路
2022/09/23 Java/Android