Angular.js跨controller实现参数传递的两种方法


Posted in Javascript onFebruary 20, 2017

前言

由于controllers之间不共享scope,如果希望在controllers之间传递参数,可能需要通过其他的方式实现,以下是当前我用到的两种在controllers之间传递参数的方法。

注:参考文章Sharing Data Between Angular Controllers

一、service

可以写一个包含get/set的service,取参数/赋参数

.factory('paramService',function(){
 return {
 result:[],
 getResult:function(){
 return this.result;
 },
 setResult:function(res){
 this.result = res;
 }
 };
})

然后可以在controllerOne中赋值,在controllerTwo中取值

// 赋值
.controller('one',function(paramService){
 paramService.setResult('one');
})

// 取值
.controller('two',function(paramService){
 var param = paramService.getResult();
})

二、$stateParams

第二种方法用于路由间传递参数,用途也比较广泛,使用场景比较多

// 传参
.state('one',{
 url:'one',
 controller:'one',
 template:'one.html',
 params:{
 name:'john'
 }
})

// 取参
.controller('one',function($stateParams){
 var name = $stateParams.name;
})

others/localStorage

其他方法可以使用一些h5的小技巧,比如使用localStorage来存参/取参,其他的方法,暂时没想到也没用到,有待后续补充.

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Angular能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
jquery实现简单的瀑布流布局
Dec 11 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
js实现移动端轮播图效果
Dec 09 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
vue中component组件的props使用详解
Sep 04 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 Javascript
Bootstrap table右键功能实现方法
Feb 20 #Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 #Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 #Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 #Javascript
原生js实现轮播图的示例代码
Feb 20 #Javascript
深入理解Javascript中的观察者模式
Feb 20 #Javascript
浅谈js中function的参数默认值
Feb 20 #Javascript
You might like
建立动态的WML站点(二)
2006/10/09 PHP
PHP GD 图像处理组件的常用函数总结
2010/04/28 PHP
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
理解JavaScript原型链
2016/10/25 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
Python中的下划线详解
2015/06/24 Python
python rsa 加密解密
2017/03/20 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
如何对python的字典进行排序
2020/06/19 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
通信工程专业毕业生推荐信
2013/12/25 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
未婚证明书模板
2014/10/08 职场文书
党员个人总结范文
2015/02/14 职场文书
上诉状格式
2015/05/23 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript