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 相关文章推荐
Google Map Api和GOOGLE Search Api整合实现代码
Jul 18 Javascript
jQuery toggle()设置CSS样式
Nov 05 Javascript
JavaScript实现算术平方根算法-代码超简单
Sep 11 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
JS模拟实现哈希表及应用详解
May 04 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 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
PHP生成带有雪花背景的验证码
2006/10/09 PHP
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
php数组删除元素示例
2014/03/21 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
jQuery实现回到顶部效果
2020/10/19 jQuery
Python不规范的日期字符串处理类
2014/06/10 Python
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
Python datetime 如何处理时区信息
2020/09/02 Python
Django自带的用户验证系统实现
2020/12/18 Python
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
汽车机修工岗位职责
2014/03/06 职场文书
太太口服液广告词
2014/03/20 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
优秀员工自荐书
2015/03/06 职场文书
赡养老人协议书范本
2015/08/06 职场文书
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫