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 23 Javascript
Javascript开发包大全整理
Dec 22 Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
详解jenkins自动化部署vue
May 14 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
javascript 得到变量类型的函数
2010/05/19 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
利用node.js如何创建子进程详解
2017/12/09 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
Python字符串格式化
2015/06/15 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
python 搜索大文件的实例代码
2019/07/08 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
HTML5地理定位实例
2014/10/15 HTML / CSS
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
办公室内勤岗位职责范本
2013/12/09 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
亲属关系公证书样本
2015/01/23 职场文书
单位委托函范文
2015/01/29 职场文书
公司财务部岗位职责
2015/04/14 职场文书
python实现剪贴板的操作
2021/07/01 Python
使用javascript解析二维码的三种方式
2021/11/11 Javascript