如何在作用域之間通信呢？
1.創(chuàng)建一個(gè)單例服務(wù)，然后通過這個(gè)服務(wù)處理所有子作用域的通信。
2.通過作用域中的事件處理通信。但是這種方法有一些限制；例如，你并不能廣泛的將事件傳播到所有監(jiān)控的作用域中。你必須選擇是否與父級(jí)作用域或者子作用域通信。
$on、$emit和$broadcast使得event、data在controller之間的傳遞變的簡單。
$emit：子傳父 傳遞event與data
$broadcast：父傳子 child controller傳遞event與data
$on：監(jiān)聽或接收數(shù)據(jù)。。用于接收event與data
$broadcast、$emit事件必須依靠其他事件（ng-click等）進(jìn)行觸發(fā)，而不能單純寫一個(gè)這個(gè)。。
$on倒是可以直接寫，因?yàn)樗鼘儆诒O(jiān)聽和接收數(shù)據(jù)的。
$on的方法中的event事件參數(shù)：
event.name 事件名稱
event.targetScope 發(fā)出或者傳播原始事件的作用域
event.currentScope 目前正在處理的事件的作用域
event.stopPropagation() 一個(gè)防止事件進(jìn)一步傳播(冒泡/捕獲)的函數(shù)(這只適用于使用`$emit`發(fā)出的事件)
event.preventDefault() 這個(gè)方法實(shí)際上不會(huì)做什么事，但是會(huì)設(shè)置`defaultPrevented`為true。直到事件監(jiān)聽器的實(shí)現(xiàn)者采取行動(dòng)之前它才會(huì)檢查`defaultPrevented`的值。
event.defaultPrevented 如果調(diào)用了`preventDefault`則為true
 1 <style>
2 div{border:1px solid #ff7300;padding:20px;margin:10px;border-radius: 5px;}
3 </style>
4 <div ng-controller="ParentController"><!--父級(jí)-->
5 <div ng-click="clkP()">click--給child</div>
6 <div ng-controller="OneSelfController"><!--自己-->
7 <span ng-click="clkme()">click me</span>
8 <div ng-controller="ChildController">
9 它是OneSelfController的子級(jí)
10 </div><!--子級(jí)-->
11 </div>
12 <div ng-controller="siblingsController">
13 它與OneSelfController是平級(jí)
14 </div><!--平級(jí)-->
15 </div>
16
17 <script>
18 var app=angular.module('firstApp',[]);//app模塊名
19 app.controller('OneSelfController',function($scope){
20 $scope.clkme=function(){
21 $scope.$broadcast('sendChild','我給子控制器傳遞數(shù)據(jù)');
22 $scope.$emit('sendParent','冒泡到父元素')
23 }
24 }).controller('ParentController',function($scope){
25 $scope.$on('sendParent',function(event,data){//監(jiān)聽在子控制器中定義的 sendParent 事件
26 console.log('OneSelfController傳過來的',data,event.name,event);//事件名稱：sendParent
27 });
28 $scope.clkP=function(){
29 $scope.$broadcast('sendAllChild','讓siblingsController接收到');
30 }
31
32 }).controller('ChildController', function($scope){
33 $scope.$on('sendChild', function(event,data) {//監(jiān)聽在子控制器中定義的 sendChild 事件
34 console.log('ChildCtrl', data,event.name,event);// 事件名稱：sendChild
35 });
36 }).controller('siblingsController', function($scope){
37 $scope.$on('sendAllChild',function(event,data) {
38 console.log('值過來吧', data);
39 });
40 //下面事件不會(huì)觸發(fā)
41 $scope.$on('sendParent', function(event,data) {
42 console.log('平級(jí)得不到值', data);
43 });
44 $scope.$on('sendChild', function(event,data) {
45 console.log('平級(jí)得不到值', data);
46 });
47 });
48
49 </script>
來自：http://www.cnblogs.com/yuzhongwusan/p/4938816.html
|
