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 相关文章推荐
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
Jquery之美中不足小结
Feb 16 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 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网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
JavaScript入门之基本函数详解
2011/10/21 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
八大排序算法的Python实现
2021/01/28 Python
深入理解Python对Json的解析
2017/02/14 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
python numpy实现rolling滚动案例
2020/06/08 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
会计专业自我鉴定范文
2013/12/29 职场文书
大三毕业自我鉴定
2014/01/15 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
个人专业技术总结
2015/03/05 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android