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 相关文章推荐
setInterval 和 setTimeout会产生内存溢出
Feb 15 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
Mar 05 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
vue interceptor 使用教程实例详解
Sep 13 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 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中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
Python实现图片识别加翻译功能
2019/12/26 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
毕业求职自荐信格式是什么
2013/11/19 职场文书
4s店总经理岗位职责
2013/12/31 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
交通事故调解协议书
2014/04/16 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
捐款通知怎么写
2015/04/24 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL
vue使用element-ui按需引入
2022/05/20 Vue.js
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android