Angular의 이벤트 통신: $on 및 $broadcast

Angular에서 이벤트 통신은 애플리케이션의 여러 부분 간의 상호 작용을 조정하는 데 중요합니다. . $on 및 $broadcast는 구성 요소 전체에서 효과적인 브로드캐스팅 및 이벤트 처리를 가능하게 하는 핵심 Angular 메커니즘입니다.

$on 및 $broadcast 이해

• $broadcast: 모든 하위 항목(하위 범위) 및 범위의 상위 체인에 특정 이벤트를 알리기 위해 범위에서 발생합니다.
• $on: 범위에 의해 등록됩니다. 현재 범위, 상위 범위 또는 하위 범위에서 브로드캐스트되는 특정 이벤트를 수신합니다.

예제에서 이벤트 통신 구현

귀하의 경우, 코드 스캐너 컨트롤러에서 처리할 수 있는 이벤트를 트리거하기 위해 바닥글 컨트롤러의 클릭 이벤트를 원합니다. 이를 달성하려면:

1. 브로드캐스터(footerController):

• $rootScope를 사용하여 이벤트를 브로드캐스트합니다. 이는 애플리케이션의 모든 범위를 포함합니다.
• footerController에서 다음과 같은 함수를 정의합니다.

$scope.startScanner = function() {
    $rootScope.$broadcast('scanner-started');
}

2. Receiver (codeScannerController):

• $on을 사용하여 codeScannerController에서 브로드캐스트 이벤트를 수신합니다:

$scope.$on('scanner-started', function(event, args) {
    // Your logic here
});

추가 기능:

• $broadcast('event-name', { any: {} }를 사용하여 이벤트를 브로드캐스팅할 때 인수를 전달할 수 있습니다. ).
• 따라서 수신자의 이벤트 핸들러에서 이러한 인수를 받을 수 있습니다.

참조 문서:

자세한 내용은 범위에 대한 공식 Angular 문서를 참조하세요: https://docs.angularjs.org/api/ng/type/$rootScope.Scope