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 lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
jquery怎样实现ajax联动框(二)
Mar 08 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
jQuery中extend函数详解
Jul 13 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
js原生map实现的方法总结
Jan 19 Javascript
vscode 调试 node.js的方法步骤
Sep 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
5种PHP创建数组的实例代码分享
2014/01/17 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
JavaScript实现更换背景图片
2019/10/18 Javascript
详解ES6数组方法find()、findIndex()的总结
2020/05/12 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
python中__call__方法示例分析
2014/10/11 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
python实现图像识别功能
2018/01/29 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
面向对象概念面试题(.NET)
2016/11/04 面试题
EJB3推出JPA的原因
2013/10/16 面试题
护理毕业生自荐信范文
2013/12/22 职场文书
七一党建活动方案
2014/01/28 职场文书
软件部经理岗位职责范本
2014/02/25 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
投资合作意向书范本
2015/05/08 职场文书