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 相关文章推荐
JavaScript 闭包深入理解(closure)
May 27 Javascript
IE中createElement需要注意的一个问题
Jul 13 Javascript
图解js图片轮播效果
Dec 20 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
Vue中keep-alive组件作用详解
Feb 04 Javascript
详解Vite的新体验
Feb 22 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建立文件夹代码
2015/01/06 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
web前端vue filter 过滤器
2018/01/12 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
Python中几个比较常见的名词解释
2015/07/04 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
Python实现两款计算器功能示例
2017/12/19 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
jupyter实现重新加载模块
2020/04/16 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
Python 爬虫性能相关总结
2020/08/03 Python
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
篝火晚会主持词
2014/03/25 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
海上钢琴师的观后感
2015/06/11 职场文书