Angular의 .$on()이란JS

Angular의 .$on()이란JS

나는 이 코드를 얻었다.$rootScope.$on('abc',function(event, next, current){ });튜토리얼에서.

내 질문은 무엇이냐는 것이다..$on()함수인 경우 앞에 왜 이 함수가 붙습니까?$?

$on관련되다$broadcast그리고.$emit- 다른 곳에서 코드를 트리거하는 방법입니다.

의 첫 번째 점$on알아둬야 할 것은, 이 방법은$scope

두 번째로 알아야 할 것은 $ prefix는 Angular 메서드를 나타내고 $ prefix는 사용을 피해야 하는 Angular 메서드를 나타냅니다.

자, 이제 세부 사항으로 넘어가겠습니다.$on이에요.

다음은 템플릿과 그 컨트롤러의 예시입니다.이 예에서는,$broadcast/$on우리가 원하는 것을 성취할 수 있도록 도와줄 수 있다.

<div ng-controller="FirstCtrl">
    <input ng-model="name"/> 
    <button ng-click="register()">Register </button>
</div>

<div ng-controller="SecondCtrl">
    Registered Name: <input ng-model="name"/> 
</div>

컨트롤러는

app.controller('FirstCtrl', function($scope){
    $scope.register = function(){

    }
});

app.controller('SecondCtrl', function($scope){

});

궁금한 점은 사용자가 register를 클릭했을 때 두 번째 컨트롤러에 이름을 전달하려면 어떻게 해야 합니까?여러 가지 솔루션을 제안할 수도 있지만, 저희가 사용하는 솔루션은 $broadcast와 $on을 사용하는 것입니다.

193달러 vs 195달러

어떤 걸로 할까요?$dom은 모든 자식 돔 요소에 채널 다운되고 $dom은 모든 조상 돔 요소에 반대 방향으로 채널 다운됩니다.

$emit과 $broadcast 중 하나를 선택하지 않는 가장 좋은 방법은 $rootScope에서 채널을 돌려 $broadcast를 모든 자녀에게 사용하는 것입니다.우리 돔 요소들이 형제자매이기 때문에 우리 사건이 훨씬 수월해 졌지.

$rootScope 및 $broadcast 추가

app.controller('FirstCtrl', function($rootScope, $scope){
    $scope.register = function(){
        $rootScope.$broadcast('BOOM!', $scope.name)
    }
});

$rootScope를 추가하여 $broadcast(broadcastName, 인수)를 사용하고 있습니다.broadcastName의 경우 고유한 이름을 지정하여 두 번째 Ctrl에서 해당 이름을 사용할 수 있도록 합니다.BOOM! 그냥 재미로 골랐어요.두 번째 인수 'arguments'는 청취자에게 값을 전달할 수 있도록 합니다.

저희 방송 수신

두 번째 컨트롤러에서는 방송을 듣기 위한 코드를 설정해야 합니다.

app.controller('SecondCtrl', function($scope){
  $scope.$on('BOOM!', function(events, args){
    console.log(args);
    $scope.name = args; //now we've registered!
  })
});

그건 정말 간단해.라이브 예시

유사한 결과를 얻기 위한 기타 방법

이 방법은 효과적이지도 않고 유지보수가 용이하지도 않지만 문제를 해결하는 간단한 방법이므로 사용하지 않도록 하십시오.

일반적으로 서비스를 사용하거나 컨트롤러를 단순화하는 방법으로 동일한 작업을 수행할 수 있습니다.자세한 내용은 설명하지 않겠습니다만, 조금 더 자세히 말씀드리려고 합니다.

마지막으로 정말 유용한 브로드캐스트는 '$destroy'입니다.$는 벤더 코드에 의해 작성된 메서드 또는 오브젝트임을 알 수 있습니다.어쨌든 컨트롤러가 파괴되면 $destroy가 브로드캐스트되므로 컨트롤러가 언제 분리되었는지 이 내용을 들어보면 알 수 있습니다.

앞의 답변은 매우 좋은 답변입니다.한마디 덧붙이고 싶습니다.이 $on 종류의 청취자는 매우 중요한 속성을 가지고 있습니다.취소(정지)할 수 있습니다.무슨 뜻인지 설명하겠습니다.

html:

<div ng-controller="FirstCtrl">
    <input ng-model="name"/> 
    <button ng-click="register()">Register </button>
</div>

<div ng-controller="SecondCtrl">
    Registered Name: <input ng-model="name"/> 
</div>
<hr/><br/>
<button ng-click="disableEvents()">Disable events</button>

컨트롤러:

app.controller('SecondCtrl', function($scope){
  $scope.cancelOn = $scope.$on('BOOM!', function(events, args){
    console.log(args);
    $scope.name = args; //now we've registered!
  });

  // this will cancel the event listening....
  $scope.disableEvents = function(){
    console.log('Canceling the event listener: ', $scope.cancelOn());
  }
});

Register(등록) 버튼을 누르면 두 번째 컨트롤러와 통신하는 것을 볼 수 있습니다.이제 "이벤트 비활성화" 버튼을 누릅니다.그러면 청취자인 $on(...)이 취소됩니다.「등록」을 다시 누르면, 청취자가 이러한 종류의 이벤트를 수신하지 않게 됩니다.

언급URL : https://stackoverflow.com/questions/28800426/what-is-on-in-angularjs