ANGULARJS
Cách giao tiếp giữa $rootScope, $broadcast và $emit trong AngularJS Tạo ứng dụng SPA trong AngularJS với Routing và StateProvider. Sử dụng Karma và Jasmine để test ứng dụng AngularJS Ứng dụng di động đa nền tảng với Ionic và React Native trong AngularJS Tích hợp thư viện và module bằng Bower và npm vào Angular Xử lý lỗi với $exceptionHandler và $log service trong AngularJS. Sử dụng Custom Directives trong AngularJS Interceptors và Http Service trong Angular Tạo và sử dụng directive trong AngularJS Cách sử dụng service trong AngularJS Cách sử dụng Dependency Injection trong AngularJS Cách sử dụng route trong AngularJS Tạo hiệu ứng với ngAnimate trong AngularJS Tối ưu hóa hiệu suất trong AngularJS Security trong AngularJS và cách sử dụng đơn giản Đa ngôn ngữ Internationalization (i18n) trong AngularJS Two way data binding trong Angularjs Bài 01: Tổng quan về AngularJS Bài 02: Download AngularJS và viết ứng dụng AngularJS đầu tiên Bài 03: Tìm hiểu Controller trong AngularJS Bài 04: Tìm hiểu Scope và rootScope trong AngularJS Bài 05: Tìm hiểu AngularJS Directives - Danh sách Directives Bài 06: Directive ng-model trong AngularJS Bài 07: Directive ng-model-options trong AngularJS Bài 08: Directives ng-bind - ng-bind-html - ng-bind-template trong AngularJS Bài 09: Directive Form trong AngularJS Bài 10: Directive ng-form trong AngularJS Bài 11: Directive input trong AngularJS Bài 12: Directive input checkbox trong AngularJS Bài 13: Directive input date trong AngularJS Bài 14: Directive input datetime-local trong AngularJS Bài 15: Directive input time trong AngularJS Bài 16: Directive input month và input week trong AngularJS Bài 17: Directive ng-show và ng-hide trong AngularJS Bài 18: Directive ng-repeat trong AngularJS Bài 19: Directive ng-init trong AngularJS Bài 20: Directive ng-include trong AngularJS Bài 21: Services trong AngularJS và cách tạo Service mới Bài 22: Directive ng-class trong angularjs Tạo tabs với ng-show & ng-class & ng-click trong angularjs Bài 23: Directive ng-click trong angularjs Bài 24: Directive ng-class-odd và ng-class-even trong Angularjs [Học AngularJS] - Bài 01 - Hello World! [Học AngularJS] - Bài 02 - ng-app [Học AngularJS] - Bài 03 - ng-controller [Học AngularJS] - Bài 04 - $scope [Học AngularJS] - Bài 05 - $rootScope
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Cách giao tiếp giữa $rootScope, $broadcast và $emit trong AngularJS

Tự động xây dựng ứng dụng phía front-end hiện nay đang trở nên phổ biến hơn bao giờ hết, và AngularJS là một trong những framework được sử dụng nhiều nhất để phát triển các ứng dụng web phía client. Trong quá trình phát triển ứng dụng, chúng ta thường cần phải truyền thông tin giữa các thành phần khác nhau để đảm bảo hoạt động của ứng dụng được suôn sẻ. Trong bài viết này, chúng ta sẽ tìm hiểu về cách giao tiếp giữa các thành phần trong AngularJS, đặc biệt là giữa các Directive, $rootScope, $broadcast và $emit.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

OGsGn png

Sơ quan hệ giữa $rootScope, $broadcast, và $emit trong AngularJS

Tại sao chúng ta sử dụng $rootScope, $broadcast ,$emit trong AngularJS?

Chúng ta sử dụng $rootScope, $broadcast, và $emit trong AngularJS để thực hiện giao tiếp giữa các thành phần trong ứng dụng AngularJS. Các thành phần này có thể là các directive, controller, service, hoặc các thành phần khác trong ứng dụng.

Việc sử dụng $rootScope, $broadcast, và $emit giúp cho các thành phần trong ứng dụng có thể giao tiếp và truyền dữ liệu cho nhau một cách dễ dàng và hiệu quả. Ví dụ, khi một sự kiện xảy ra trong một directive, ta có thể sử dụng $rootScope, $broadcast, hoặc $emit để thông báo cho các directive hoặc controller khác trong ứng dụng biết về sự kiện đó và thực hiện các hành động phù hợp.

Tương tự, ta cũng có thể sử dụng các phương thức này để truyền dữ liệu từ một thành phần đến các thành phần khác trong ứng dụng. Ví dụ, khi một controller thực hiện một hành động và cần truyền dữ liệu đến một directive khác, ta có thể sử dụng $rootScope, $broadcast, hoặc $emit để truyền dữ liệu đó.

Bài viết này được đăng tại [free tuts .net]

Vì vậy, sử dụng $rootScope, $broadcast, và $emit là một phương pháp tiện lợi và hiệu quả để thực hiện giao tiếp và truyền dữ liệu giữa các thành phần trong ứng dụng AngularJS.

$rootScope trong AngularJS

$rootScope là một biến toàn cục trong AngularJS, được sử dụng để chia sẻ dữ liệu giữa các thành phần khác nhau trong ứng dụng. Nó là cha đẻ của tất cả các $scope và có thể truy cập từ bất kỳ nơi nào trong ứng dụng.

Cách sử dụng $rootScope

Để sử dụng $rootScope, ta cần inject nó vào controller hoặc directive của mình:

myApp.controller('myController', function($rootScope, $scope) {
  // sử dụng $rootScope trong đây
});

Để set hoặc get giá trị của biến trong $rootScope, ta chỉ cần truy cập vào nó như một object:

// set giá trị
$rootScope.myVariable = 'Hello World';

// get giá trị
var value = $rootScope.myVariable;

Ví dụ minh họa

// Đăng ký controller và inject $rootScope vào đó
myApp.controller('myController', function($rootScope, $scope) {
  // Set giá trị cho biến message trong $rootScope
  $rootScope.message = 'Hello World';
});

// Đăng ký directive và inject $rootScope vào đó
myApp.directive('myDirective', function($rootScope) {
  return {
    restrict: 'E',
    template: '<div>{{message}}</div>',
    link: function(scope, element, attrs) {
      // Truy cập vào biến message trong $rootScope và hiển thị ra directive
      $rootScope.$watch('message', function(newValue, oldValue) {
        element.html(newValue);
      });
    }
  };
});

Trong ví dụ trên, biến message được set giá trị trong $rootScope bởi controller và được truy cập và hiển thị ra directive thông qua $rootScope.

$broadcast trong AngularJS

$broadcast là một phương thức của đối tượng $rootScope trong AngularJS, được sử dụng để gửi thông điệp từ đối tượng $rootScope tới tất cả các child scope của nó. Khi một event được broadcast từ $rootScope, tất cả các child scope sẽ nhận được thông điệp đó thông qua cơ chế event.

Cách sử dụng $broadcast

Để sử dụng $broadcast, ta sử dụng cú pháp sau:

$rootScope.$broadcast(eventName, eventData);

Trong đó:

  • eventName là tên của event cần broadcast.
  • eventData là dữ liệu liên quan đến event (có thể bỏ qua).

Ví dụ minh họa

// Tạo một đối tượng $rootScope
app.controller('MyController', function($rootScope, $scope) {
  // Broadcast một event có tên "myEvent" từ $rootScope
  $rootScope.$broadcast('myEvent', { message: 'Hello world!' });

  // Lắng nghe event "myEvent" trên scope con
  $scope.$on('myEvent', function(event, data) {
    console.log(data.message); // Output: "Hello world!"
  });
});

Trong ví dụ này, ta tạo một event có tên "myEvent" và gửi nó từ đối tượng $rootScope bằng cách sử dụng phương thức $broadcast. Sau đó, ta lắng nghe event "myEvent" trên scope con và in ra dữ liệu liên quan đến event. Khi event được broadcast từ $rootScope, tất cả các child scope đều nhận được event đó và có thể thực hiện các hành động tương ứng.

$emit trong AngularJS

$emit là một phương thức được sử dụng để truyền dữ liệu giữa các thành phần của ứng dụng, ví dụ như giữa các controller, directives hoặc services. Khi $emit được gọi từ một scope (phạm vi), nó sẽ kích hoạt một sự kiện và truyền dữ liệu cho tất cả các phạm vi con của nó.

Cách sử dụng $emit

Cú pháp sử dụng $emit trong AngularJS như sau:

$scope.$emit(eventName, data);

Trong đó:

  • eventName là tên của sự kiện mà ta muốn kích hoạt.
  • data là dữ liệu mà ta muốn truyền đi kèm với sự kiện.

Ví dụ minh hoạ

Ta có một ứng dụng AngularJS gồm 2 controllers, ParentCtrl ChildCtrl, và ta muốn truyền dữ liệu từ ParentCtrl cho ChildCtrl. Ta có thể sử dụng $emit như sau:

// trong ParentCtrl
$scope.$emit('myEvent', {name: 'John', age: 30});

// trong ChildCtrl
$scope.$on('myEvent', function(event, data) {
  console.log(data); // {name: 'John', age: 30}
});

Ở đây, khi $emit được gọi từ ParentCtrl, nó sẽ kích hoạt sự kiện myEvent và truyền dữ liệu {name: 'John', age: 30} kèm theo. Ở ChildCtrl, ta sử dụng $on để lắng nghe sự kiện myEvent và nhận dữ liệu được truyền đi từ ParentCtrl.

Tương tự như $broadcast, sự kiện sẽ lan truyền xuống tất cả các scope con của nó, nếu scope con không lắng nghe sự kiện thì sự kiện sẽ dừng lại tại scope con đó.

Các cách kết hợp $rootScope, $broadcast và $emit

Sử dụng $rootScope để chia sẻ dữ liệu giữa các controller và directive

$rootScope là một scope toàn cục được chia sẻ giữa tất cả các controllerdirective trong ứng dụng. Nó là cha của tất cả các scope khác và là nơi lưu trữ các biến hoặc hàm mà bạn muốn sử dụng toàn cục trong ứng dụng của bạn.

Bạn có thể sử dụng $rootScope để chia sẻ dữ liệu giữa các controller và directive. Để gán một giá trị cho biến trên $rootScope, bạn có thể sử dụng cú pháp sau:

$rootScope.variableName = value;

Sau đó, trong các controller hoặc directive khác, bạn có thể truy cập giá trị này bằng cách sử dụng cú pháp sau:

$rootScope.variableName;

Ví dụ, giả sử bạn muốn chia sẻ một biến có tên "message" giữa hai controller "MainController" "SecondaryController", bạn có thể sử dụng $rootScope như sau:

<body ng-app="myApp">
  <div ng-controller="MainController">
    <h1>{{ message }}</h1>
    <button ng-click="changeMessage()">Change Message</button>
  </div>
  <div ng-controller="SecondaryController">
    <h1>{{ message }}</h1>
  </div>

  <script>
    var app = angular.module('myApp', []);
    app.controller('MainController', function($scope, $rootScope) {
      $rootScope.message = 'Hello from MainController!';
      $scope.changeMessage = function() {
        $rootScope.message = 'New message from MainController!';
      };
    });

    app.controller('SecondaryController', function($scope, $rootScope) {
      $scope.message = $rootScope.message;
    });
  </script>
</body>

Kết quả

anh10 jpg

Sử dụng $broadcast để truyền dữ liệu giữa các con của một controller

Khi bạn muốn truyền dữ liệu giữa các con của một controller, bạn có thể sử dụng $broadcast. Khi sử dụng $broadcast, bạn có thể truyền dữ liệu từ controller cha tới các controller con.

Ví dụ:

<body ng-app="myApp">
    <div ng-controller="ParentController">
      <button ng-click="broadcastMessage()">Broadcast Message</button>
      <p>Parent message: {{ parentMessage }}</p>
      <div ng-controller="ChildController">
        <p>Child message: {{ childMessage }}</p>
      </div>
    </div>
    
    <script>
      var app = angular.module('myApp', []);
      
      app.controller('ParentController', function($scope, $rootScope) {
        $scope.parentMessage = 'Hello from ParentController!';
        
        $scope.broadcastMessage = function() {
          $rootScope.$broadcast('childEvent', 'Hello from ParentController!');
        };
      });
      
      app.controller('ChildController', function($scope) {
        $scope.$on('childEvent', function(event, args) {
          $scope.childMessage = args;
        });
      });
    </script>
  </body>

Kết quả

anh11 jpg

Trong ví dụ trên, ParentController có một biến $scope parentMessage và một hàm broadcastMessage. Hàm broadcastMessage sử dụng $broadcast để gửi một sự kiện có tên là 'childEvent' và dữ liệu là một chuỗi từ ParentController tới các controller con.

ChildController sử dụng $on để nghe sự kiện 'childEvent'. Khi sự kiện được kích hoạt, ChildController sẽ cập nhật giá trị cho biến $scope.childMessage.

Bạn có thể sử dụng $broadcast để truyền dữ liệu giữa nhiều controller con khác nhau.

Sử dụng $emit để truyền dữ liệu giữa các cha của một controller

Để sử dụng $emit để truyền dữ liệu giữa các cha của một controller, ta có thể làm như sau:

var app = angular.module('myApp', []);
app.controller('GrandparentController', function($scope) {
  $scope.grandparentMessage = 'Hello from GrandparentController!';
});

app.controller('ParentController', function($scope, $rootScope) {
  $scope.parentMessage = 'Hello from ParentController!';
  $scope.emitMessage = function() {
    $scope.$emit('grandparentEvent', 'Hello from ParentController!');
  };
});

app.controller('ChildController', function($scope) {
  $scope.$on('grandparentEvent', function(event, args) {
    $scope.childMessage = args;
  });
});

Trong đoạn code trên, ta định nghĩa ba controller: GrandparentController, ParentController ChildController. GrandparentController là cha của ParentController, ParentController là cha của ChildController. Ta sử dụng $emit để truyền dữ liệu từ ParentController lên GrandparentController, sau đó sử dụng $broadcast để truyền dữ liệu từ ParentController xuống ChildController.

Trong ParentController, ta định nghĩa hàm emitMessage để gọi $emit. Khi hàm này được gọi, sự kiện grandparentEvent sẽ được phát ra từ ParentController và truyền dữ liệu Hello from ParentController!. Trong ChildController, ta sử dụng $on để lắng nghe sự kiện grandparentEvent và lấy dữ liệu được truyền từ ParentController.

Trong HTML, ta có thể gọi hàm emitMessage từ ParentController bằng cách sử dụng ng-click như sau:

<div ng-controller="ParentController">
  <p>{{ parentMessage }}</p>
  <button ng-click="emitMessage()">Emit Message</button>
  <div ng-controller="ChildController">
    <p>{{ childMessage }}</p>
  </div>
</div>

Kết quả

anh12 jpg

Kết bài viết

Trong AngularJS, $rootScope, $broadcast và $emit là các công cụ quan trọng giúp chúng ta truyền tải dữ liệu giữa các controller và directive một cách dễ dàng và hiệu quả. Tuy nhiên, việc sử dụng chúng cần phải thận trọng để tránh các vấn đề về hiệu suất và bảo mật. Đồng thời, cần hiểu rõ về cách thức hoạt động của mỗi công cụ để áp dụng phù hợp với từng tình huống. Hy vọng với những kiến thức đã trình bày, bạn sẽ có thể áp dụng chúng một cách thành công trong quá trình phát triển ứng dụng AngularJS của mình.

Cùng chuyên mục:

Tích hợp thư viện và module bằng Bower và npm vào Angular

Tích hợp thư viện và module bằng Bower và npm vào Angular

Ứng dụng di động đa nền tảng với Ionic và React Native trong AngularJS

Ứng dụng di động đa nền tảng với Ionic và React Native trong AngularJS

Sử dụng Karma và Jasmine để test ứng dụng AngularJS

Sử dụng Karma và Jasmine để test ứng dụng AngularJS

Tạo ứng dụng SPA trong AngularJS với Routing và StateProvider.

Tạo ứng dụng SPA trong AngularJS với Routing và StateProvider.

Two way data binding trong Angularjs

Two way data binding trong Angularjs

Đa ngôn ngữ Internationalization (i18n) trong AngularJS

Đa ngôn ngữ Internationalization (i18n) trong AngularJS

Security trong AngularJS và cách sử dụng đơn giản

Security trong AngularJS và cách sử dụng đơn giản

Tối ưu hóa hiệu suất trong AngularJS

Tối ưu hóa hiệu suất trong AngularJS

Xử lý lỗi với $exceptionHandler và $log service trong AngularJS.

Xử lý lỗi với $exceptionHandler và $log service trong AngularJS.

Tạo hiệu ứng với ngAnimate trong AngularJS

Tạo hiệu ứng với ngAnimate trong AngularJS

Cách sử dụng route trong AngularJS

Cách sử dụng route trong AngularJS

Cách sử dụng Dependency Injection trong AngularJS

Cách sử dụng Dependency Injection trong AngularJS

Cách sử dụng service trong AngularJS

Cách sử dụng service trong AngularJS

Tạo và sử dụng directive trong AngularJS

Tạo và sử dụng directive trong AngularJS

Interceptors và Http Service trong Angular

Interceptors và Http Service trong Angular

Sử dụng Custom Directives trong AngularJS

Sử dụng Custom Directives trong AngularJS

Thiết lập project với Angular 6

Thiết lập project với Angular 6

Ở bài trước, chúng ta đã tìm hiểu cách cài đặt môi trường cũng như…

Cài đặt môi trường cho Angular 6

Cài đặt môi trường cho Angular 6

Ở bài trước, chúng ta đã tìm hiểu vì sao chọn Angular, Angular 6 là…

Giới thiệu Angular 6x

Giới thiệu Angular 6x

Xin giới thiệu với các bạn tổng quan tất cả các bài viết học về…

Ứng dụng single page Angular 4

Ứng dụng single page Angular 4

Trong bài học này, chúng ta sẽ thực hành tạo một ứng dụng single page…

Top