>웹 프론트엔드 >JS 튜토리얼 >`$scope.$emit` 및 `$scope.$on`은 AngularJS 컨트롤러에서 이벤트 통신을 어떻게 촉진합니까?

`$scope.$emit` 및 `$scope.$on`은 AngularJS 컨트롤러에서 이벤트 통신을 어떻게 촉진합니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-12-11 11:58:12962검색

How Do `$scope.$emit` and `$scope.$on` Facilitate Event Communication in AngularJS Controllers?

$scope.$emit 및 $scope.$on을 사용하는 컨트롤러의 이벤트 통신

$scope.$emit 및 $scope.$ 컨트롤러 간의 이벤트 통신을 촉진하는 데 필수적인 AngularJS 메서드입니다. 그러나 효과적인 구현을 위해서는 정확한 동작을 이해하는 것이 중요합니다.

$emit 메서드

$emit는 컨트롤러에서 이벤트를 전달하여 범위 계층 구조를 통해 위쪽으로 보냅니다. . 이를 통해 컨트롤러는 상위 범위 및 잠재적으로 다른 하위 범위와 통신할 수 있습니다.

$on 메서드

$on은 다른 컨트롤러에서 발생하는 이벤트를 수신합니다. 콜백 함수는 전달된 데이터를 포함하여 발생된 이벤트에 대한 세부 정보가 포함된 이벤트 객체를 수신합니다.

이벤트 이름 일치

$emit 및 $on을 사용할 때 중요합니다. 일치하는 이벤트 이름을 사용합니다. 이벤트 이름에 따라 이벤트를 받을 컨트롤러가 결정됩니다.

범위 관계

컨트롤러 범위 간의 관계에 따라 어떤 통신 방법이 효과적인지 결정됩니다.

부모자녀관계

에서 상위-하위 범위 관계, 상위 컨트롤러의 $broadcast(발산) 및 하위 컨트롤러의 $on(수신)이면 충분합니다.

예:

function firstCtrl($scope) {
    $scope.$broadcast('someEvent', [1,2,3]);
}

function secondCtrl($scope) {
    $scope.$on('someEvent', function(event, mass) { console.log(mass); });
}

부자관계 없음

없을 경우 부모-자식 관계에서 컨트롤러에 $rootScope를 삽입하고 $rootScope.$broadcast를 사용하면 이벤트가 모든 범위에 도달하도록 보장됩니다.

예:

function firstCtrl($rootScope) {
    $rootScope.$broadcast('someEvent', [1,2,3]);
}

하위에서 부모로 이벤트 전달

하위에서 부모로 이벤트 전달 범위를 사용하려면 하위 컨트롤러에 $scope.$emit를 사용하고 상위 컨트롤러에 $scope.$on을 사용하세요.

예:

function firstCtrl($scope) {
    $scope.$on('someEvent', function(event, data) { console.log(data); });
}

function secondCtrl($scope) {
    $scope.$emit('someEvent', [1,2,3]);
}

위 내용은 `$scope.$emit` 및 `$scope.$on`은 AngularJS 컨트롤러에서 이벤트 통신을 어떻게 촉진합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.