컨트롤러 간 통신을 용이하게 하기 위해 AngularJS에서 $on 및 $broadcast를 어떻게 사용할 수 있습니까?

Angular의 이벤트 전파: $on 및 $broadcast

AngularJS 애플리케이션에서 서로 다른 컨트롤러 간의 통신에는 다음의 전파가 필요한 경우가 많습니다. 이벤트. 이 프로세스를 용이하게 하는 두 가지 방법은 $on과 $broadcast입니다.

$broadcast

$broadcast를 사용하면 컨트롤러가 모든 하위 컨트롤러에 이벤트를 보낼 수 있으며 해당 이벤트를 수신하기 위해 등록한 다른 컨트롤러에. $broadcast를 사용하여 이벤트를 보내려면:

<code class="javascript">$rootScope.$broadcast('event-name');</code>

$rootScope는 Angular 애플리케이션 내 다른 모든 범위의 상위 범위이기 때문에 사용됩니다.

$on

$on을 사용하면 컨트롤러가 다른 컨트롤러나 상위 컨트롤러에서 브로드캐스팅한 이벤트를 수신할 수 있습니다. $on을 사용하여 이벤트를 수신하려면:

<code class="javascript">$scope.$on('event-name', function(event, args) {
  // Do something when the event is received
});</code>

$on의 첫 번째 매개변수는 수신할 이벤트의 이름이고, 두 번째 매개변수는 이벤트가 실행될 때 실행될 콜백 함수입니다. 받았다. 콜백 함수는 'event' 및 'args'라는 두 개의 매개변수를 선택적으로 받을 수 있습니다.

예

질문에 설명된 상황을 고려하세요.

<code class="javascript">angular.module('myApp').controller('footerController', ["$scope", function($scope) {}]);

angular.module('myApp').controller('codeScannerController', ["$scope", function($scope) {
  $scope.startScanner = function() {
    // Do something when the button is clicked
  };
}]);</code>

이러한 컨트롤러 간의 통신을 활성화하려면 다음과 같이 $broadcast 및 $on을 사용할 수 있습니다.

footerController에서:

<code class="javascript">$scope.startScanner = function() {
  $rootScope.$broadcast('scanner-started');
}</code>

codeScannerController에서:

<code class="javascript">$scope.$on('scanner-started', function(event, args) {
  // Do something when the 'scanner-started' event is received
});</code>

footerController에서 버튼을 클릭하면 스캐너 시작 이벤트가 브로드캐스팅됩니다. 이 이벤트는 codeScannerController에 의해 수신 및 처리되므로 필요한 작업을 수행할 수 있습니다.

인수 전달

이벤트와 함께 인수를 전달할 수도 있습니다. $rootScope.$broadcast 메소드를 사용합니다. 예:

<code class="javascript">$rootScope.$broadcast('scanner-started', { any: {} });</code>

이러한 인수는 $on:

<code class="javascript">$scope.$on('scanner-started', function(event, args) {
  var anyThing = args.any;
  // Do what you want to do
});</code>

의 콜백 함수에서 액세스할 수 있습니다.

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