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 相关文章推荐
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
js实现新年倒计时效果
Dec 10 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 Javascript
微信小程序事件流原理解析
Nov 27 Javascript
JS加载解析Markdown文档过程详解
May 19 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
php二维数组用键名分组相加实例函数
2013/11/06 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
Textarea输入字数限制实例(兼容iOS&安卓)
2017/07/06 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
python如何实现int函数的方法示例
2018/02/19 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
Python 操作 MySQL数据库
2020/09/18 Python
详解python对象之间的交互
2020/09/29 Python
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
文明礼仪演讲稿
2014/05/12 职场文书
小学运动会演讲稿
2014/08/25 职场文书
共青团员自我评价范文
2014/09/14 职场文书
成绩报告单家长评语
2014/12/30 职场文书
长城导游词
2015/01/30 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书