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 相关文章推荐
javascript 特殊字符串
Feb 25 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
JS+JSP checkBox 全选具体实现
Jan 02 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
15分钟学会vue项目改造成SSR(小白教程)
Dec 17 Javascript
Vue中keep-alive组件作用详解
Feb 04 Javascript
jQuery实现的分页插件完整示例
May 26 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
在 PHP 中使用随机数的三个步骤
2006/10/09 PHP
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
python操作xml文件示例
2014/04/07 Python
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
python中的数据结构比较
2019/05/13 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
python属于跨平台语言码
2020/06/09 Python
如何对python的字典进行排序
2020/06/19 Python
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
退伍老兵事迹材料
2014/01/31 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
记账会计岗位职责
2014/06/16 职场文书
通知书大全
2015/04/27 职场文书
人民币使用说明书
2019/04/17 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
Java对文件的读写操作方法
2022/04/29 Java/Android
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang