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 相关文章推荐
javaScript call 函数的用法说明
Apr 09 Javascript
js中将具有数字属性名的对象转换为数组
Mar 06 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
javascript对象的相关操作小结
May 16 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
浅谈js中的bind
Mar 18 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 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
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
Python多线程编程简单介绍
2015/04/13 Python
python计算方程式根的方法
2015/05/07 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
公司合作意向书范文
2014/07/30 职场文书
党支部活动策划方案
2014/08/18 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
店铺转让协议书
2015/01/29 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书