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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 Javascript
JS实现简单贪吃蛇小游戏
Oct 28 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数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
PHP生成不重复标识符的方法
2014/11/21 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
Python连接SQLServer2000的方法详解
2017/04/19 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
教育科研先进个人材料
2014/01/26 职场文书
竞争性谈判邀请书
2014/02/06 职场文书
体现团队精神的口号
2014/06/06 职场文书
python实现三次密码验证的示例
2021/04/29 Python