AngularJS控制器之间的数据共享及通信详解  更新时间:2016年08月01日 15:41:23   投稿:daisy   本文详细介绍了AngularJS控制器之间的数据共享与通信,对angularjs共享数据及通信相关知识感兴趣的朋友可以一起学习。 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’); }); } 父控制器 如果两个控制器共同拥有同一个父控制器,则可以通过父控制器来进行数据共享和通信。比如: // 父控制器 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 中,可以通过一个元素,来获取其上的控制器实例。通过这种方式便可以快速的获取 修改某个控制器中的数据,或者调用这个控制器中的方法。比如: 可以通过以下的方法,来获取控制器实例: var instance = angular.element(document.getElementById(‘div-a’)).scope(); 接着,便可以通过这个 instance 来调用控制器的方法,获取和修改值了。无法是元素本身绑定有控制器,还是元素的父级元素绑定有控制器,都可以成功的获取。 本文关于Angular控制器之间的数据共享与通信就介绍到这了,对angularjs共享数据相关知识感兴趣的朋友可以一起学习,谢谢大家支持脚本之家。 您可能感兴趣的文章: angular中使用Socket.io实例代码 使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室 angular中不同的组件间传值与通信的方法 AngularJS控制器controller正确的通信的方法 在Angular项目使用socket.io实现通信的方法 angularjs 控制器 通信 数据共享 相关文章 Angularjs中使用Filters详解 本文给大家总结了下在Angularjs的模板、控制器、或者服务中使用Filters的方法,有需要的小伙伴可以参考下 2016-03-03 使用Angular CLI生成 Angular 5项目教程详解 这篇文章主要介绍了使用Angular CLI生成 Angular 5项目的教程详解 ,需要的朋友可以参考下 2018-03-03 Angular单元测试之事件触发的实现 这篇文章主要介绍了Angular单元测试之事件触发的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2020-01-01 angularjs ocLazyLoad分步加载js文件实例 本篇文章主要介绍了angularjs ocLazyLoad分步加载js文件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-01-01 AngularJS select加载数据选中默认值的方法 下面小编就为大家分享一篇AngularJS select加载数据选中默认值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-02-02 angular2 ng2 @input和@output理解及示例 本篇文章主要介绍了angular2 ng2 @input和@output理解及示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-10-10 AngularJS日期格式化常见操作实例分析 这篇文章主要介绍了AngularJS日期格式化常见操作,结合实例形式分析了AngularJS日期格式化常用参数功能、设置与使用技巧,需要的朋友可以参考下 2018-05-05 Angular PWA使用的Demo示例 这篇文章主要介绍了Angular PWA使用的Demo示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2019-01-01 详解Angular-ui-BootStrap组件的解释以及使用 这篇文章主要介绍了详解Angular-ui-BootStrap组件的解释以及使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-07-07 AngularJS学习笔记之ng-options指令 ng-options是angular-1.3新出的一个指令,这篇文章就来介绍这个指令的用法.有需要的小伙伴可以参考下。 2015-06-06 最新评论

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共享数据相关知识感兴趣的朋友可以一起学习,谢谢大家支持脚本之家。

您可能感兴趣的文章:

  • angular中使用Socket.io实例代码
  • 使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
  • angular中不同的组件间传值与通信的方法
  • AngularJS控制器controller正确的通信的方法
  • 在Angular项目使用socket.io实现通信的方法
张贴在3