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 相关文章推荐
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
详解Ant Design of React的安装和使用方法
Dec 27 Javascript
layer iframe 设置关闭按钮的方法
Sep 12 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 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字符串函数学习之substr()
2015/03/27 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
python设置windows桌面壁纸的实现代码
2013/01/28 Python
Python中使用ElementTree解析XML示例
2015/06/02 Python
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
Python: 传递列表副本方式
2019/12/19 Python
python实现简单的购物程序代码实例
2020/03/03 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
法律七进实施方案
2014/03/15 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP