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学习笔记1 数据类型
Jan 11 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
Angular学习教程之RouterLink花式跳转
May 03 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
详解如何在vue-cli中使用vuex
Aug 07 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 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 魔术方法使用说明
2009/10/20 PHP
优化php效率,提高php性能的一些方法
2011/03/24 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
先进工作者获奖感言
2014/02/08 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
2014年居委会工作总结
2014/12/09 职场文书
前台接待岗位职责
2015/02/03 职场文书
2015年毕业生实习评语
2015/03/25 职场文书
会议主持人开场白台词
2015/05/28 职场文书
毕业典礼主持词
2015/06/29 职场文书
小学二年级语文教学反思
2016/03/03 职场文书