angularjs的$on、$emit、$broadcast

如何在做用域之間通訊呢?
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函數

相關文章
相關標籤/搜索