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给input和textarea设定ie中的focus
May 29 Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
js加密解密字符串可自定义密码因子
May 13 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 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 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
PHP iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
kafka-python批量发送数据的实例
2018/12/27 Python
Python Django 命名空间模式的实现
2019/08/09 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
html5使用canvas画三角形
2014/12/15 HTML / CSS
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
德国综合购物网站:OTTO
2018/11/13 全球购物
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
信仰纪录片观后感
2015/06/08 职场文书
荒岛余生观后感
2015/06/09 职场文书
2015年教师节广播稿
2015/08/19 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
Java如何实现树的同构?
2021/06/22 Java/Android
MySQL的索引你了解吗
2022/03/13 MySQL
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server