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 构造函数 面相对象学习必备知识
Jun 09 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
PHP PDO操作总结
Nov 17 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
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文件下载类
2006/12/06 PHP
php垃圾代码优化操作代码
2010/08/05 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
Python生成数字图片代码分享
2017/10/31 Python
python 显示数组全部元素的方法
2018/04/19 Python
Python内置异常类型全面汇总
2020/05/28 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
serialVersionUID具有什么样的特征
2014/02/20 面试题
教师队伍管理制度
2014/01/14 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
保护母亲河倡议书
2014/04/14 职场文书
小学六年级学生评语
2014/04/22 职场文书
学校教师安全责任书
2014/07/23 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
环卫工人慰问信
2015/02/15 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
Python if else条件语句形式详解
2022/03/24 Python