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 相关文章推荐
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
javascript 日期时间 转换的方法
Feb 21 Javascript
js模拟select下拉菜单控件的代码
May 08 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
微信小程序 标签传入数据
May 08 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
原生JS封装vue Tab切换效果
Apr 28 Vue.js
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
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
PHP游戏编程25个脚本代码
2011/02/08 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
Python实现爬取并分析电商评论
2020/06/19 Python
浅谈python出错时traceback的解读
2020/07/15 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
语文教育专业推荐信范文
2013/11/25 职场文书
生物科学系大学生的自我评价
2013/12/20 职场文书
学校运动会开幕演讲稿
2014/01/04 职场文书
教师个人鉴定材料
2014/02/08 职场文书
机电一体化专业求职信
2014/07/22 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
2014年后勤工作总结
2014/11/18 职场文书
端午节活动总结报告
2015/02/11 职场文书
追悼词范文大全
2015/06/23 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
Spring Bean是如何初始化的详解
2022/03/22 Java/Android