轉(zhuǎn)。。。 如何在作用域之間通信呢？
1.創(chuàng)建一個(gè)單例服務(wù)，然后通過這個(gè)服務(wù)處理所有子作用域的通信。
2.通過作用域中的事件處理通信。但是這種方法有一些限制；例如，你并不能廣泛的將事件傳播到所有監(jiān)控的作用域中。你必須選擇是否與父級(jí)作用域或者子作用域通信。

$on、$emit和$broadcast使得event、data在controller之間的傳遞變的簡(jiǎn)單。
$emit：子傳父 傳遞event與data
$broadcast：父?jìng)髯?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>

轉(zhuǎn)載于:https://www.cnblogs.com/cx709452428/p/6560810.html

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的angularjs的$on、$emit、$broadcast的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。