AngularJS 本身已经提供了像指令 Directive 和 服务 Service 一类的方式,来实现数据和代码的共享和复用,但在实际的项目开发中,或许是处于懒惰,亦或是为了便利,总会想在两个控制器之间,直接进行数据的共享通信,或者是函数与方法的调用,这里我们就看看有哪些方法可以满足这个要求。
单例服务
单例服务是 AngularJS 本身支持的数据和代码共享方式,因为是单例的,所有的控制器访问的便是同一份数据。比如,下面的 Service 便可以实现:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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() 来获取数据
下面是简单的用法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// 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'
);
});
}
|
父控制器
如果两个控制器共同拥有同一个父控制器,则可以通过父控制器来进行数据共享和通信。比如:
1
2
3
4
|
<div ng-controller=
"ParentController"
>
<div ng-controller=
"ChildOneController"
></div>
<div ng-controller=
"ChildTwoController"
></div>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
// 父控制器
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 ,通过修改和监听这两个值,可以达到在控制器之间数据共享和通信的目的。方法如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
// 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 中,可以通过一个元素,来获取其上的控制器实例。通过这种方式便可以快速的获取
修改某个控制器中的数据,或者调用这个控制器中的方法。比如:
1
2
3
|
<div ng-controller=
"AppController"
>
<div id=
"div-a"
></div>
</div>
|
可以通过以下的方法,来获取控制器实例:
1
|
var
instance = angular.element(document.getElementById(
'div-a'
)).scope();
|
接着,便可以通过这个 instance 来调用控制器的方法,获取和修改值了。无法是元素本身绑定有控制器,还是元素的父级元素绑定有控制器,都可以成功的获取。
本文关于Angular控制器之间的数据共享与通信就介绍到这了,对angularjs共享数据相关知识感兴趣的朋友可以一起学习,谢谢大家支持脚本之家。