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 select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
javascript通过class来获取元素实现代码
Feb 20 Javascript
javascript确认框的三种使用方法
Dec 17 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
按钮接受回车事件的三种实现方法
Jun 06 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
jquery轮播图插件使用方法详解
Jul 31 jQuery
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
做个自己站内搜索引擎
2006/10/09 PHP
PHP中的正规表达式(一)
2006/10/09 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
Javascript 中的 && 和 || 使用小结
2010/04/25 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
python mysql中in参数化说明
2020/06/05 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
.NET remoting中对象激活的两种方式
2015/06/08 面试题
计算机专业学生的自我评价
2013/12/15 职场文书
六一儿童节主持词
2014/03/21 职场文书
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python