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 相关文章推荐
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 Javascript
JavaScript的document对象和window对象详解
Dec 30 Javascript
数组Array的排序sort方法
Feb 17 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
Vue watch响应数据实现方法解析
Jul 10 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加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
python通过socket查询whois的方法
2015/07/18 Python
python协程之动态添加任务的方法
2019/02/19 Python
用python实现刷点击率的示例代码
2019/02/21 Python
python实现函数极小值
2019/07/10 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
Python networkx包的实现
2020/02/14 Python
Python如何实现的二分查找算法
2020/05/27 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
.NET常见笔试题集
2012/12/01 面试题
城市轨道专业个人求职信范文
2013/09/23 职场文书
办公室经理岗位职责
2014/01/01 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
材料员岗位职责范本
2015/04/11 职场文书
社区党支部承诺书
2015/04/29 职场文书
幼儿园六一主持词
2015/06/30 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书