Skip to main content

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

Comments

Popular posts from this blog

Lập trình đa luồng với Task

Bài viết được đăng trên Jou Lập trình
Trong phiên bản .NET framework 4.0, Microsoft đã bổ sung nhiều thư viện hỗ trợ việc xử lý đa luồng (multi-threading), nhằm đơn giản hóa việc lập trình lẫn hiệu suất của chương trình. Trong bài viết này, tôi xin hướng dẫn các bạn sử dụng lớp System.Threading.Task.

Tìm hiểu về IdentityServer 4

Trong bài viết này, mình sẽ hướng dẫn các bạn làm quen với thư viện Identity Server 4, và tích hợp các service In-Memory của Identity Server 4 vào Project Web API trong .NET Core.

[ASP.NET MVC] Authentication và Authorize

Một trong những vấn đề bảo mật cơ bản nhất là đảm bảo những người dùng hợp lệ truy cập vào hệ thống. ASP.NET đưa ra 2 khái niệm: Authentication và Authorize
Authentication xác nhận bạn là ai. Ví dụ: Bạn có thể đăng nhập vào hệ thống bằng username và password hoặc bằng ssh.
Authorization xác nhận những gì bạn có thể làm. Ví dụ: Bạn được phép truy cập vào website, đăng thông tin lên diễn đàn nhưng bạn không được phép truy cập vào trang mod và admin.