> 웹 프론트엔드 > JS 튜토리얼 > Angular에서 이벤트 통신을 위해 $on 및 $broadcast를 사용하는 방법은 무엇입니까?

Angular에서 이벤트 통신을 위해 $on 및 $broadcast를 사용하는 방법은 무엇입니까?

Susan Sarandon
풀어 주다: 2024-10-26 15:42:02
원래의
586명이 탐색했습니다.

How to Use $on and $broadcast for Event Communication in Angular?

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

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

$on 및 $broadcast 이해

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

예제에서 이벤트 통신 구현

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

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

  • 애플리케이션의 모든 범위를 포함하므로 $rootScope를 사용하여 이벤트를 브로드캐스팅합니다.
  • footerController에서 다음과 같은 기능을 정의합니다.
$scope.startScanner = function() {
    $rootScope.$broadcast('scanner-started');
}
로그인 후 복사

2. 수신기(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

위 내용은 Angular에서 이벤트 통신을 위해 $on 및 $broadcast를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿