如何在做用域之間通訊呢?
1.建立一個單例服務,而後經過這個服務處理全部子做用域的通訊。
2.經過做用域中的事件處理通訊。可是這種方法有一些限制;例如,你並不能普遍的將事件傳播到全部監控的做用域中。你必須選擇是否與父級做用域或者子做用域通訊。
$on、$emit和$broadcast使得event、data在controller之間的傳遞變的簡單。
$emit:子傳父 傳遞event與data
$broadcast:父傳子 child controller傳遞event與data
$on:監聽或接收數據。。用於接收event與data
$broadcast、$emit事件必須依靠其餘事件(ng-click等)進行觸發,而不能單純寫一個這個。。
$on卻是能夠直接寫,由於它屬於監聽和接收數據的。
$on的方法中的event事件參數:
event.name 事件名稱
event.targetScope 發出或者傳播原始事件的做用域
event.currentScope 目前正在處理的事件的做用域
event.stopPropagation() 一個防止事件進一步傳播(冒泡/捕獲)的函數(這隻適用於使用`$emit`發出的事件)
event.preventDefault() 這個方法實際上不會作什麼事,可是會設置`defaultPrevented`爲true。直到事件監聽器的實現者採起行動以前它纔會檢查`defaultPrevented`的值。
event.defaultPrevented 若是調用了`preventDefault`則爲true
<style> div{border:1px solid #ff7300;padding:20px;margin:10px;border-radius: 5px;} </style> <div ng-controller="ParentController"><!--父級--> <div ng-click="clkP()">click--給child</div> <div ng-controller="OneSelfController"><!--本身--> <span ng-click="clkme()">click me</span> <div ng-controller="ChildController"> 它是OneSelfController的子級 </div><!--子級--> </div> <div ng-controller="siblingsController"> 它與OneSelfController是平級 </div><!--平級--> </div> <script> var app=angular.module('firstApp',[]);//app模塊名 app.controller('OneSelfController',function($scope){ $scope.clkme=function(){ $scope.$broadcast('sendChild','我給子控制器傳遞數據'); $scope.$emit('sendParent','冒泡到父元素') } }).controller('ParentController',function($scope){ $scope.$on('sendParent',function(event,data){//監聽在子控制器中定義的 sendParent 事件 console.log('OneSelfController傳過來的',data,event.name,event);//事件名稱:sendParent }); $scope.clkP=function(){ $scope.$broadcast('sendAllChild','讓siblingsController接收到'); } }).controller('ChildController', function($scope){ $scope.$on('sendChild', function(event,data) {//監聽在子控制器中定義的 sendChild 事件 console.log('ChildCtrl', data,event.name,event);// 事件名稱:sendChild }); }).controller('siblingsController', function($scope){ $scope.$on('sendAllChild',function(event,data) { console.log('值過來吧', data); }); //下面事件不會觸發 $scope.$on('sendParent', function(event,data) { console.log('平級得不到值', data); }); $scope.$on('sendChild', function(event,data) { console.log('平級得不到值', data); }); }); </script>
另外一篇文章app
http://blog.csdn.net/u014291497/article/details/52268408函數