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 日期处理之时区问题
Oct 08 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
jQuery中:not选择器用法实例
Dec 30 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
vue中keep-alive内置组件缓存的实例代码
Apr 16 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 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
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
TensorFlow实现创建分类器
2018/02/06 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
高山背包:High Sierra
2017/11/23 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
客户代表实习人员自我鉴定
2013/09/27 职场文书
幼儿园招生广告
2014/03/19 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
白血病捐款倡议书
2014/05/14 职场文书
求职信标题怎么写
2014/05/26 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
暑期社会实践证明书
2014/11/17 职场文书
2014财务部年度工作总结
2014/12/08 职场文书