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 相关文章推荐
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
Jun 24 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
小程序云开发初探(小结)
Oct 24 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
php echo 输出字符串函数详解
2010/05/13 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
js实现继承的5种方式
2015/12/01 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
Python ATM功能实现代码实例
2020/03/19 Python
python如何判断IP地址合法性
2020/04/05 Python
男女朋友协议书
2014/04/23 职场文书
与美同行演讲稿
2014/09/13 职场文书
警察群众路线整改措施
2014/09/26 职场文书
超市员工管理制度
2015/08/06 职场文书
个人合作协议范本
2015/08/06 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang