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 相关文章推荐
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
jQuery中的$.ajax()方法应用
May 06 Javascript
jQuery中size()方法用法实例
Dec 27 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
js获取滚动距离的方法
May 30 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
js运动事件函数详解
Oct 21 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 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
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
js随机生成一个验证码
2017/06/01 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
Python简单实现enum功能的方法
2016/04/25 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
一份python入门应该看的学习资料
2018/04/11 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
Java基础类库面试题
2013/09/04 面试题
3.12植树节活动总结2014
2014/03/13 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
土地转让协议书
2014/09/27 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
2015年推普周活动方案
2015/05/06 职场文书
外科护士长工作总结
2015/08/12 职场文书
导游词之麻姑仙境
2019/11/18 职场文书