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 相关文章推荐
js 图片缩放(按比例)控制代码
May 27 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
Aug 13 Javascript
JS弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
Angular之jwt令牌身份验证的实现
Feb 14 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
SONY SRF-M100的电路分析
2021/03/02 无线电
Php+SqlServer实现分页显示
2006/10/09 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
vue.js 微信支付前端代码分享
2018/02/10 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
python版本的读写锁操作方法
2016/04/25 Python
使用python3.5仿微软记事本notepad
2016/06/15 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
你对IPv6了解程度
2016/02/09 面试题
学校四风对照检查材料
2014/08/28 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
辅导员学期工作总结
2015/08/14 职场文书
学校团代会开幕词
2016/03/04 职场文书
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电
python开发人人对战的五子棋小游戏
2022/05/02 Python