如何在作用域之間通信呢? 1.創建一個單例服務,然後通過這個服務處理所有子作用域的通信。 2.通過作用域中的事件處理通信。但是這種方法有一些限制;例如,你並不能廣泛的將事件傳播到所有監控的作用域中。你必須選擇是否與父級作用域或者子作用域通信。
什麼是事件
- 如同瀏覽器響應瀏覽器層的事件,比如鼠標點擊、獲得焦點,angular應用也可以響應angular事件
- angular事件系統並不與瀏覽器的事件系統相通,我們只能在作用域上監聽angular事件而不是DOM事件
事件傳播
因爲作用域是有層次的,所以我們可以在作用域鏈上傳遞事件:
使用$emit冒泡事件,事件從當前子作用域冒泡到賦作用域,在產生事件的作用域之上的所有作用域都會收到這個事件的通知
$emit()方法帶有兩個參數:name 要發出的事件的名稱 args 一個參數集合,作爲對象傳遞到事件監聽器上
使用$broadcast向下傳遞事件,每個註冊了監聽器的子作用域都會收到這個信息
$broadcast()方法帶有兩個參數:name 要廣播的事件的名稱 args 一個參數集合,作爲對象傳遞到事件監聽器上
使用$on監聽事件
$on()方法帶有兩個參數:event 事件對象 param 參數集合,$broadcast()、$emit()傳遞過來的參數集合
1 <style> 2 div{border:1px solid #ff7300;padding:20px;margin:10px;border-radius: 5px;} 3 </style> 4 <div ng-controller="ParentController"><!--父級--> 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的子級 10 </div><!--子級--> 11 </div> 12 <div ng-controller="siblingsController"> 13 它與OneSelfController是平級 14 </div><!--平級--> 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','我給子控制器傳遞數據'); 22 $scope.$emit('sendParent','冒泡到父元素') 23 } 24 }).controller('ParentController',function($scope){ 25 $scope.$on('sendParent',function(event,data){//監聽在子控制器中定義的 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) {//監聽在子控制器中定義的 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 //下面事件不會觸發 41 $scope.$on('sendParent', function(event,data) { 42 console.log('平級得不到值', data); 43 }); 44 $scope.$on('sendChild', function(event,data) { 45 console.log('平級得不到值', data); 46 }); 47 }); 48 49 </script>