AngularJS에서. $ on ()은 무엇입니까?

AngularJS에서. $ on ()은 무엇입니까?

---

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

내 질문은 .$on()무엇입니까? 왜 앞에 $?

---

$on관련이있다 $broadcast및 $emit다른 장소에서 트리거 코드에 대한 방법이다-.

먼저 알아야 추론 $on할 [해석]$scope

두 번째로 알아야 할 것은 $ 접두사는 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){

});

제 질문은 사용자가 등록을 클릭 할 때 두 번째 컨트롤러에 이름을 어떻게 전달합니까? 여러 솔루션을 생각할 수 있도록 우리가 사용할 솔루션은 $ broadcast and $ on입니다.

$ broadcast 대 $ emit

어느 것을 선호합니까? $ broadcast는 모든 하위 dom 요소로 채널 다운되고 $ emit은 모든 상위 dom 요소에 반대 방향으로 채널링됩니다.

$ emit 또는 $ broadcast 사이의 결정을 피하는 가장 좋은 방법은 $ rootScope에서 채널을 보내는 모든 것에 게 $ broadcast를 사용하는 것입니다. dom 요소가 형제이기 때문에 우리의 경우를 훨씬 쉽게 만듭니다.

$ rootScope 추가 및 $ 브로드 캐스트 허용

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

$ rootScope를 추가하고 이제 $ broadcast (broadcastName, arguments)를 사용하고 있습니다. broadcastName의 경우 고유 한 이름을 지정하여 secondCtrl에서 해당 이름을 잡을 수 있습니다. BOOM을 선택했습니다! 재미로. 두 번째 인수 '인수'는 리스너에게 값을 수 있습니다.

방송 수신

두 번째 컨트롤러에서 방송을들을 수 있도록 코드를 설정해야합니다.

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

정말 간단합니다. 라이브 예

방법 결과를 얻는 방법

이 방법은 일반적이거나 유지 관리가 쉽지 않지만 문제를 실행하는 방법을 사용하지 않습니다.

일반적으로 서비스를 사용하거나 컨트롤러를 단순화하여 동일한 작업을 수행 할 수 있습니다. 이에 대해 자세히 설명하겠다고 생각했습니다.

마지막으로, 청취하기에 정말 유용한 방송은 '$ destroy'라는 것을 기억하세요. $는 벤더 코드에 의해 생성 된 메소드 또는 객체라는 것을 의미합니다. 어쨌든 $ destroy는 컨트롤러가 파괴 될 때 브로드 캐스팅됩니다. 컨트롤러가 제거 된시기를 알기 위해 이것을 듣고 싶을 수 있습니다.

참조 URL : https://stackoverflow.com/questions/28800426/what-is-on-in-angularjs