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에서 프런트엔드를 만들어 부모 컨트롤러에서 메시지를 받을 입력을 만듭니다. 보내기 버튼을 클릭하면 하위 컨트롤러로 전송됩니다.

하위 컨트롤러는 아래와 같이 메시지를 수신하고 콘솔에 기록합니다.

# 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>

출력:

Broadcast in Angularjs Frontend

콘솔:

Broadcast in Angularjs 결과

위의 예에서 $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()` 사용