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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 01 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的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
javascript iframe编程相关代码
2009/12/28 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
python学习数据结构实例代码
2015/05/11 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
python中退出多层循环的方法
2018/11/27 Python
python实现最小二乘法线性拟合
2019/07/19 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
卫校毕业生自我鉴定
2013/10/31 职场文书
护士求职推荐信范文
2013/11/23 职场文书
建筑项目策划书
2014/01/13 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
上班离岗检讨书
2014/09/10 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
责任书格式
2015/01/29 职场文书
创业计划书之养殖业
2019/10/11 职场文书
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python