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

前端之家收集整理的这篇文章主要介绍了AngularJS控制器之间的数据共享及通信详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

单例服务

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

在一个控制器中,调用 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()

获取数据

下面是简单的用法

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

父控制器

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

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

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

全局或共用的变量

AngularJS 提供了对

window

localStorage

两个变量的封装,

$window

$localStorage

,通过修改和监听这两个值,可以达到在控制器之间数据共享和通信的目的。方法如下:

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

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

元素绑定

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

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

接着,便可以通过这个

instance

调用控制器的方法获取修改值了。无法是元素本身绑定有控制器,还是元素的父级元素绑定有控制器,都可以成功的获取

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

原文链接:https://www.f2er.com/js/46933.html

猜你在找的JavaScript相关文章