AngularJs: Giao tiếp giữa các controller

AngularJs Scope được tổ chức theo dạng phân cấp và lồng nhau. Mỗi ứng dụng có duy nhất 1 $rootScope. Các $scope khác đều kế thừa và nằm dưới nó.
Trường hợp bạn muốn chia sẽ dữ liệu giữa các controller, thì có rất nhiều cách khác nhau. Angularjs hỗ trợ 2 phương thức: $broadcast và $emit. Vận dụng 2 hàm này, bạn có thể chia sẽ dữ liệu dễ dàng, đặc biệt là nó rất hữu ích khi bạn làm ứng dụng Single Page Application.
$broadcast: lan truyền sự kiện xuống các con của nó
$emit: lan truyền sự kiện theo hướng lên trên

Ví dụ về broadcast

Để lan truyền sự kiện từ 1 controller đến tất cả controller còn lại, bạn tạo 1 service để thực hiện việc lan truyền từ rootScope.
Ví dụ 1:

//Lan truyền sự kiện notifyMessageChange
$rootScope.$broadcast("notifyMessageChange");
//....
//Để nhận sự kiện, child controller dùng hàm $on
$scope.$on("notifyMessageChange", function(){
     //code
    });

Ví dụ 2:

  <div class="container" ng-app="myapp">
     <div ng-controller="ACtrl">
      <label>A Controller:</label>
    <div class="form-group">
        <label for="broadcastMessage">Input message</label>
        <input type="text" class="form-control" id="broadcastMessage" placeholder="Enter your message" ng-model="message">
        <br />
        <button class="btn btn-primary" ng-click="notify()">Notify</button>
    </div>
    Result: <div>{{message}}</div>
     </div>
     <div ng-controller="BCtrl">
      <label>B Controller:</label><div>{{message}}</div>
     </div>
     <div ng-controller="CCtrl">
      <label>C Controller:</label><div>{{message}}</div>
     </div>
  </div>

 
   var shareModule = angular.module("shareModule", []);
   shareModule.factory("shareService", function($rootScope){
    var shareService = {}; 
    shareService.message = "";   
    shareService.broadcastMessage = function(message){
     shareService.message = message;
     $rootScope.$broadcast("notifyMessageChange");
    }
    return shareService;
   });
   var myApp = angular.module("myapp",["shareModule"]);
   //service style, probably the simplest one  
    
   myApp.controller("ACtrl", function($scope, shareService){
    $scope.message = "Broadcast Message";
    $scope.notify = function(){
     shareService.broadcastMessage($scope.message);
    };
    $scope.$on("notifyMessageChange", function(){
     $scope.message = shareService.message;
    });
   });
   myApp.controller("BCtrl", function($scope, shareService){
    $scope.message = "Broadcast Message";
    $scope.$on("notifyMessageChange", function(){
     $scope.message = shareService.message;
    });
   });
   myApp.controller("CCtrl", function($scope, shareService){
    $scope.message = "Broadcast Message";
    $scope.$on("notifyMessageChange", function(){
     $scope.message = shareService.message;
    });
   });

Ví dụ về $emit

$emit dùng để giao tiếp event giữa child và parent.
Ví dụ:

   myApp.controller("ParentCtrl", function($scope){
    $scope.$on("notifyChange", function(event, message){
     $scope.childMessage = message;
   });
   myApp.controller("ChildCtrl", function($scope){
    $scope.onButtonClick = function(){     
     $scope.$emit("notifyChange", $scope.message); //pass arrayData
    };    
   });

Ví dụ 2: Kết hợp $broadcast với $emit

<div class="container" ng-app="myapp">
    <div ng-controller="ParentCtrl">
        <div class="row">
            <h3>Parent Controller</h3>
            <div>
                Child message: {{childMessage}}
            </div>
            <div class="col-xs-2">
                <input type="text" class="form-control" placeholder="your message" ng-model="broadcastMessage">

            </div>
            <button ng-click="notifyAll()" class="btn btn-primary">Broadcast</button>
        </div>
        <div class="row" ng-controller="ChildCtrl">
            <h3>Child 1</h3>
            <div>
                Parent message: {{parentMessage}}
            </div>
            <div class="col-xs-2">
                <input type="text" class="form-control" placeholder="your message" ng-model="message">
            </div>
            <button ng-click="onButtonClick()" class="btn btn-primary">Emit</button>
        </div>
        <div class="row" ng-controller="Child2Ctrl">
            <h3>Child 2</h3>
            <div>
                Parent message: {{parentMessage}}
            </div>
            <div class="col-xs-2">
                <input type="text" class="form-control" placeholder="your message" ng-model="message">
            </div>
            <button ng-click="onButtonClick()" class="btn btn-primary">Emit</button>
        </div>
    </div>
</div>

  
   var myApp = angular.module("myapp",[]);
   //service style, probably the simplest one  
    
   myApp.controller("ParentCtrl", function($scope){
    $scope.$on("notifyChange", function(event, message){
     $scope.childMessage = message;
    });
    $scope.notifyAll = function(){
     $scope.$broadcast('updateParentMessage', $scope.broadcastMessage);
    }
   });
   myApp.controller("ChildCtrl", function($scope){
    $scope.onButtonClick = function(){     
     $scope.$emit("notifyChange", $scope.message); //pass arrayData
    }
    $scope.$on("updateParentMessage", function(event, message){
     $scope.parentMessage = message;
    })
   });
   myApp.controller("Child2Ctrl", function($scope){
    $scope.onButtonClick = function(){     
     $scope.$emit("notifyChange", $scope.message); //pass arrayData
    }
    $scope.$on("updateParentMessage", function(event, message){
     $scope.parentMessage = message;
    })
   });

Chúc các bạn thành công!

Nhatkyhoctap's blog