Angular 页面跳转时传参问题


Posted in Javascript onAugust 01, 2016

首先,你需要已经配置过你的rout,比如:

$stateProvider
.state('firstPage',{
url:'/Page/firstPage',
templateUrl: 'Page/views/firstPage.html',
controller: 'firstPageCtrl'
//dependencies: ['service/vipSeachService']
})
.state('secPage', {


 params:{'message':null},
url: '/Page/secPage',
templateUrl: 'Page/views/secPage.html',
controller: 'secPageCtrl'
})

其中注意第二个地址信息中的params属性,这个就是你要接受参数的对象,以key :value的形式定义

而在跳转页面时,两个方法都可以传参,一种是直接写在html中

<a ui-sref="sec-page">跳转第二页</a>

此时传参跟在页面地址的后面

<a ui-sref="sec-page({message:messageId})">跳转第二页</a>

第二种就是写在controller中

.controller('firstPageCtrl', function($scope, $state) {  
$state.go('secPage'); });

同样参数写在地址后面,以对象的形式

.controller('firstPageCtrl', function($scope, $state) {
$state.go('secPage',{message:messageId}); 
});

传过去的参数,需要在目标页面的controller中用$stateParams接收,改方法需要提前注入

.controller('secPageCtrl', function($scope, $state,$stateParams) {
var test=$stateParams.message;
});

以上所述是小编给大家介绍的Angular 页面跳转时传参问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
vue之延时刷新实例
Nov 14 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 #Javascript
1秒50万字!js实现关键词匹配
Aug 01 #Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 #Javascript
JS实现数字格式千分位相互转换方法
Aug 01 #Javascript
AngularJS ng-controller 指令简单实例
Aug 01 #Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 #Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 #Javascript
You might like
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
php判断访问IP的方法
2015/06/19 PHP
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
详解vuex的简单使用
2018/03/12 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
Python实现批量修改文件名实例
2015/07/08 Python
Python选课系统开发程序
2016/09/02 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
Python操作MySQL数据库的方法
2018/06/20 Python
Python封装原理与实现方法详解
2018/08/28 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
python+pygame实现坦克大战
2019/09/10 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
Python实现手绘图效果实例分享
2020/07/22 Python
python实现xml转json文件的示例代码
2020/12/30 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
JAVA程序员自荐书
2014/01/30 职场文书
前台文员职责范本
2014/03/07 职场文书
啤酒节策划方案
2014/05/28 职场文书
Redis实现短信验证码登录的示例代码
2022/06/14 Redis
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL