AngularJS で $broadcast() を使用する

Rana Hasnain Khan 2024年2月15日

Angular Angular Event

この記事では、AngularJS の $broadcast() について紹介します。

AngularJS で `$broadcast()` を使用する

$broadcast() は、親コントローラから子コントローラにイベントを送信する $rootScope メソッドです。その特定のスコープのリスナーがキャッチできるイベントを送信します。

イベントが親コントローラーから子コントローラーに送信されると、子コントローラーは別のメソッド $scope.$on を使用してイベントを処理できます。

$broadcast() を使用する例を見てみましょう。まず、コントローラーを定義する新しいファイル script.js を作成します。

親コントローラから子コントローラへ $broadcast() を使ってメッセージを送り、子コントローラでそのイベントを受け取り、別のメソッド $scope.$on() を使ってコンソールにログ出力します。

# angular
import angular from 'angular';

var app = angular.module('app', []);

 app.controller("parentCtrl", function ($scope) {
 $scope.handleClick = function (msg) {
 $scope.$broadcast('sendMsg', { message: msg });
 };

 });

 app.controller("childCtrl", function ($scope) {
 $scope.$on('sendMsg', function (event, args) {
 $scope.message = args.message;
 console.log($scope.message);
 });
 });

それでは、index.html にフロントエンドを作成しましょう。ここで、親コントローラーからメッセージを受け取る入力を作成します。 send ボタンをクリックすると、子コントローラーに送信されます。

以下に示すように、子コントローラーはメッセージを受信し、コンソールにログオンします。

# angular
<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="lib/style.css" />
        <script src="lib/script.js"></script>

    </head>

    <body ng-app="app">
        <div ng-controller="parentCtrl">
            <h1>Send to Child controller</h1>
            <input ng-model="msg">
            <button ng-click="handleClick(msg);">Broadcast</button>
            <br /><br />
            <div ng-controller="childCtrl">
            </div>
        </div>
    </body>
</html>

出力：

Angularjs フロントエンドでブロードキャスト

コンソール：

Angularjs Result でブロードキャスト

上記の例から、$broadcast() を使用して、イベントまたはメッセージを親コントローラーから子コントローラーに送信しました。そして $scope.$on() メソッドを使用して、子コントローラーでイベントまたはメッセージを受け取り、いくつかの機能を実行しました。

著者： Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

AngularJS で $broadcast() を使用する

関連記事 - Angular Event

AngularJS で `$broadcast()` を使用する