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 相关文章推荐
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
php similar_text()函数的定义和用法
2016/05/12 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
zTree树形插件异步加载方法详解
2017/06/14 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
Python 详解基本语法_函数_返回值
2017/01/22 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
柯基袜:Corgi Socks
2017/01/26 全球购物
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
竞聘演讲稿范文
2014/01/12 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
生物学专业求职信
2014/07/23 职场文书
迟到检讨书范文
2015/01/27 职场文书
联谊会开场白
2015/06/01 职场文书
机器人瓦力观后感
2015/06/12 职场文书