data in child controller 2 : {{data.name}}
?
控制器:
?
1
2
3
4
5
6
7
.controller('childCtrl1','Data',function($scope,Data){
? ? $scope.data = Data;
}])
?
.controller('childCtrl2',Data){
? ? $scope.data = Data;
}])
这种方式适用于任何需要通信的 Controller 之间。
?
基于事件
?
Angular 为 $scope 提供了冒泡和隧道机制,$broadcast 会把事件广播给所有子 Controller,而 $emit 则会将事件冒泡传递给父 Controller,$on 则是 Angular 的事件监听函数,利用这三者,可以实现上下级和同级(需要构造一个共同的父级 Controller)之间的通信。
?
上下级之间
?
这种情况下比较简单。
?
如果是子 Controller 往父 Controller 上发送事件(从作用域往上发送事件),使用 scope.$emit
?
$scope.$emit("someEvent",{});
如果是父 Controller 往子 Controller 上发送事件(从作用域往下发送事件),使用 scope.$broadcast
?
$scope.$broadcast("someEvent",{});
无论是 $emit 还是 $broadcast 发送的事件,都用 $scope.$on 接收:
?
1
2
3
$scope.$on("someEvent",function(event,data) {
? ? // 这里取到发送过来的数据 data
});
同级之间
?
同级之间利用事件通信有两种方法。一种是利用上下级之间事件传播的变形,另一种是借助 $rootScope 。
?
借助父 controller
?
先看第一种,在子 Controller 中向父 Controller 触发一个事件,然后在父 Controller 中监听事件,再广播给子 Controller ,这样通过事件携带的参数,实现了数据经过父 Controller,在同级 Controller 之间传播。
?
但是要注意,通过父 Controller 作为中介进行传递的话,子 Controller 触发的事件名和父 Controller 广播用的事件名不能一样,否则会进入死循环。
?
看代码:
?
1
2
3
4
5
6
7
8
9
data in outer controller: {{name}}
?