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

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

Linda Hamilton
Linda Hamilton원래의
2024-12-07 11:59:12290검색

How Do `$scope.$emit` and `$scope.$on` Facilitate Inter-Controller Communication in AngularJS?

$scope.$emit 및 $scope.$on 작업

AngularJS에서는 $scope를 사용하여 컨트롤러 간 통신을 구현할 수 있습니다. .$emit 및 $scope.$on 메소드. 이러한 방법은 이벤트 기반 통신을 촉진하여 데이터 또는 신호가 한 컨트롤러에서 다른 컨트롤러로 브로드캐스팅될 수 있도록 합니다.

$scope.$emit 및 $scope.$on: 설명

  • $scope.$emit: 범위를 통해 위쪽으로 전파되는 이벤트를 내보냅니다. Hierarchy.
  • $scope.$on: 특정 이름의 이벤트를 수신하고 이벤트가 트리거되면 콜백 기능을 수행합니다.

부모-자식 범위 관계가 중요합니다

이러한 방법의 효과는 다음에 따라 달라집니다. 관련된 컨트롤러 범위 간의 상위-하위 관계. 두 가지 유형의 이벤트 전달을 사용할 수 있습니다.

  • $scope.$broadcast: 이벤트를 모든 하위 범위로 아래쪽으로 전달합니다.
  • $scope. $emit: 범위를 통해 위쪽으로 이벤트를 전달합니다. 계층 구조.

예시 시나리오

1. 상위-하위 범위 관계:

첫 번째 컨트롤러($scope.$emit)의 범위가 두 번째 컨트롤러($scope.$on)의 상위인 경우 다음 코드가 작동합니다.

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

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

2. 상위-하위 범위 관계 없음:

상위-하위 관계가 없는 경우 $rootScope를 컨트롤러에 삽입하고 이벤트를 모든 하위 범위에 브로드캐스트할 수 있습니다.

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

3. 하위 컨트롤러에서 상위 컨트롤러로 이벤트 전달:

하위 컨트롤러에서 상위 컨트롤러로 이벤트를 전달하려면 $scope.$emit를 사용하세요. 첫 번째 컨트롤러($scope.$on)의 범위가 두 번째 컨트롤러($scope.$emit)의 상위인 경우:

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

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

$scope.$emit 및 $scope 방법을 이해합니다. $작업 중에도 AngularJS 애플리케이션의 컨트롤러 간에 효과적으로 통신할 수 있습니다.

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

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