anglar中$emitと$broadcastの詳細

angglarjsにおけるbroadcastとemit$onの処理思想

Anglarのcontrol間の通信方式については、rootScopeを通じて、またscopeの作用領域を通じて、もちろんもう一つの個人がいいと思う通信方式はbroadcast、emit、ドルonで傍受するいくつかの方法があります.

broadcast方式とemit方式の違いbroadcast方式の一つのブロードキャストモードは、親レベルがメッセージを送信する時間であり、このメッセージイベントを傍受する機能が実行される.emitは$broadcast方式とは反対に、サブレベルcontrollerがメッセージイベントをリリースし、父レベルcontrollerが傍受する関数が実行される.両方の方法でフラットレベルのcontrollerは、メッセージイベントを受信することができません.同じcontrollerの中には、メッセージイベントをキャプチャすることができます.親子レベルのcontroller

<div ng-controller="ParentCtrl">                  //    
    <div ng-controller="SelfCtrl">                //    
        <a ng-click="click()">click mea>  
        <div ng-controller="ChildCtrl">div>     //    
    div>  
    <div ng-controller="BroCtrl">div>           //    
div>

javascriptは以下の通りです

    phonecatControllers.controller('SelfCtrl', function($scope) {  
    $scope.click = function () {  
        $scope.$broadcast('to-child', 'child');  
        $scope.$emit('to-parent', 'parent');  
    }  
});  

phonecatControllers.controller('ParentCtrl', function($scope) {  
    $scope.$on('to-parent', function(d,data) {  
        console.log(data);         //        
    });  
    $scope.$on('to-child', function(d,data) {  
        console.log(data);         //        
    });  
});  

phonecatControllers.controller('ChildCtrl', function($scope){  
    $scope.$on('to-child', function(d,data) {  
        console.log(data);         //        
    });  
    $scope.$on('to-parent', function(d,data) {  
        console.log(data);         //        
    });  
});  

phonecatControllers.controller('BroCtrl', function($scope){  
    $scope.$on('to-parent', function(d,data) {  
        console.log(data);        //        
    });  
    $scope.$on('to-child', function(d,data) {  
        console.log(data);        //        
    });  
});  

同じcontrolerの中に

    <div ng-controller="Ctrl">
        <h1>{{message1}}h1>
        <h2>{{message2}}h2>
    div>

jsコード:

    angular.module('app', [])
        .controller('Ctrl', ['$scope', function($scope) {
            $scope.$on('msg1', function(e, msg) {
                $scope.message1 = msg;
            });
            $scope.$on('msg2', function(e, msg) {
                $scope.message2 = msg;
            });
            $scope.$emit('msg1', 'Hello Angular!');
            $scope.$broadcast('msg2', 'Angular is magic!')
        }]);

注意:emit発泡方法に比べて、broadcast放送方法はより多くの資源を消費します.放送イベントはこの作用領域のすべての子孫作用域に深く入り込みます.単独パスによって泡が発生するemitによって消費される資源は全く数量レベルではありません.したがって、数千人の子の役割領域を含め、より高い性能を求める場合には、broadcastを廃棄するかどうかを考慮する必要があります.