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 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
Apr 04 Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 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+MySql编写聊天室
2006/10/09 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
python处理圆角图片、圆形图片的例子
2014/04/25 Python
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
Python编写屏幕截图程序方法
2015/02/18 Python
Python创建系统目录的方法
2015/03/11 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
python zip()函数使用方法解析
2019/10/31 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
python批量修改文件名的示例
2020/09/27 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
香港交友网站:be2香港
2018/07/22 全球购物
Lucene推荐的分页方式是什么?
2015/12/07 面试题
Java面试题汇总
2015/12/06 面试题
求职信格式范本
2013/11/15 职场文书
小学新学期寄语
2014/04/02 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
美丽心灵观后感
2015/06/01 职场文书
基层工作经历证明
2015/06/19 职场文书