AngularJS控制器之间的数据共享及通信详解


Posted in Javascript onAugust 01, 2016

AngularJS 本身已经提供了像指令 Directive 和 服务 Service 一类的方式,来实现数据和代码的共享和复用,但在实际的项目开发中,或许是处于懒惰,亦或是为了便利,总会想在两个控制器之间,直接进行数据的共享通信,或者是函数与方法的调用,这里我们就看看有哪些方法可以满足这个要求。

单例服务

单例服务是 AngularJS 本身支持的数据和代码共享方式,因为是单例的,所有的控制器访问的便是同一份数据。比如,下面的 Service 便可以实现:

angular
 .module('app')
 .service('ObjectService', [ObjectService]);
function ObjectService() {
 var list = {};
 return {
  get: function(id){
   return list[id];
  },
  set: function(id, v){
   list[id] = v;
  }
 };
}

在一个控制器中,调用 ObjectService.set('i', 1) 设置的数据,在其它控制器中,便可以通过 ObjectService.get('i') 来获取。

广播与事件

AngularJS 中在触发事件和发送广播时,都可以传递参数,可以通过这一特性,来实现数据的共享。与事件和广播相关的,共有三个方法,分别是:

    1.$emit():触发事件,它可以向上传递数据,比如,子控制器向父控制器,还有控制器向 $rootScope

    2.$broadcast():发送广播,它可以向下传递数据,比如,父控制器向子控制器传递数据,或者 $rootScope 向任意控制器传递数据

    3.$on():监听事件与广播,可以捕获 $emit $broadcast

可以将控制器之间的通信,分为三种情形:

    1.无直接关联的控制器:使用 $rootScope.$emit()、$rootScope.$boardcast() $scope.$emit 来发出数据,通过 $rootScope.$on() 来获取数据

    2.父控制器到子控制器:父控制器使用 $scope.$boradcast() 来发送数据,子控制器通过 $scope.$on() 来获取数据

    3.子控制器至父控制器:子控制器使用 $scope.$emit() 来发送数据,父控制器通过 $scope.$on() 来获取数据

下面是简单的用法:

// one controller
angular
 .module('app')
 .controller('OneController', ['$scope', OneController]);
function OneController($scope){
 var data = {value: 'test'};
 $rootScope.$broadcast('open.notice.editor', data);
}

// other controller
angular
 .module('app')
 .controller('AnotherController', ['$scope', AnotherController]);
function AnotherController($scope){
 $scope.$on('open.notice.editor', function(event, data){
  $scope.open(data);
  $scope.$emit('notice.editor.opened');
 });
}

父控制器

如果两个控制器共同拥有同一个父控制器,则可以通过父控制器来进行数据共享和通信。比如:

<div ng-controller="ParentController">
 <div ng-controller="ChildOneController"></div>
 <div ng-controller="ChildTwoController"></div>
</div>
// 父控制器
angular
 .module('app')
 .controller('ParentController', ['$scope', ParentController]);
function ParentController($scope){
 // 用于传递数据的变量
 $scope.data = null;
}

// 子控制器
angular
 .module('app')
 .controller('ChildOneController', ['$scope', ChildOneController]);
function ChildOneController($scope){
 // 数据设置
 $scope.$parent.data = 1;
}

// 子控制器
angular
 .module('app')
 .controller('ChildTwoController', ['$scope', '$timeout', ChildTwoController]);
function ChildTwoController($scope, $timeout){
 $timeout(function(){
  // 数据读取
  console.log($scope.$parent.data);
 }, 1000);
}

全局或共用的变量

AngularJS 提供了对 window localStorage 两个变量的封装,$window $localStorage ,通过修改和监听这两个值,可以达到在控制器之间数据共享和通信的目的。方法如下:

// one controller
angular
 .module('app')
 .controller('OneController', ['$scope', '$window', OneController]);
function OneController($scope, $window){
 // 数据设置
 $window.data = 1;
}

// other controller
angular
 .module('app')
 .controller('AnotherController', ['$scope', AnotherController]);
function AnotherController($scope){
 // 监听修改
 $scope.$watch(function(){
  return $window.data;
 }, function(n){
  $scope.windowData = n;
 });
}

其实,这种监听修改的方式,也可以用在其它通信方式中。

元素绑定

AngularJS 中,可以通过一个元素,来获取其上的控制器实例。通过这种方式便可以快速的获取
修改某个控制器中的数据,或者调用这个控制器中的方法。比如:

<div ng-controller="AppController">
 <div id="div-a"></div>
</div>

可以通过以下的方法,来获取控制器实例:

var instance = angular.element(document.getElementById('div-a')).scope();

接着,便可以通过这个 instance 来调用控制器的方法,获取和修改值了。无法是元素本身绑定有控制器,还是元素的父级元素绑定有控制器,都可以成功的获取。

本文关于Angular控制器之间的数据共享与通信就介绍到这了,对angularjs共享数据相关知识感兴趣的朋友可以一起学习,谢谢大家支持三水点靠木。

Javascript 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
自己封装的常用javascript函数分享
Jan 07 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 #Javascript
AngularJS基础 ng-href 指令用法
Aug 01 #Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 #Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 #Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 #Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 #Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 #Javascript
You might like
PHP APC缓存配置、使用详解
2014/03/06 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
CI框架常用方法小结
2016/05/17 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
JavaScript中的私有成员
2006/09/18 Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
python实现简易版计算器
2020/06/22 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
python 常用的基础函数
2018/07/10 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
腾讯公司的一个sql题
2013/01/22 面试题
简历自我评价怎么写呢?
2014/01/06 职场文书
房产买卖委托公证书
2014/04/04 职场文书
报案材料怎么写
2015/05/25 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
班主任工作总结范文
2015/08/13 职场文书
整理Python中常用的conda命令操作
2021/06/15 Python
python playwright 自动等待和断言详解
2021/11/27 Python
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android