programing

AngularJS의 루트스코프에 브로드캐스트이벤트 등록을 취소하려면 어떻게 해야 하나요?

easyjava 2023. 3. 10. 22:53
반응형

AngularJS의 루트스코프에 브로드캐스트이벤트 등록을 취소하려면 어떻게 해야 하나요?

다음과 같은 것이 있습니다.

angular.module('test')
    .controller('QuestionsStatusController1',
    ['$rootScope', '$scope', '$resource', '$state',
    function ($rootScope, $scope, $resource, $state) {

        $scope.action2 = function() {
            $rootScope.$broadcast('action2@QuestionStatusController1');
        }

    }]);

angular.module('test')
   .controller('QuestionsStatusController2',
   ['$rootScope', '$scope', '$resource', '$state',
   function ($rootScope, $scope, $resource, $state) {

    $rootScope.$on('action2@QuestionStatusController1', function {
         //write your listener here
    })

   }]);

청취 이벤트 등록을 취소해야 할 것으로 알고 있습니다.코드화/이 작업을 수행하는 방법을 알려주시겠습니까?

이벤트 등록을 취소하지 않으면 메모리 누수가 발생하며, 이는 전달되는 함수로 간주됩니다.$on(아직 참조가 존재하기 때문에)는 정리되지 않습니다.더 중요한 것은 범위 내에서 함수 참조가 되는 변수도 모두 유출된다는 것입니다.이로 인해 컨트롤러가 어플리케이션 내에서 여러 번 생성/파괴되면 기능이 여러 번 호출됩니다.다행히 앵글JS에서는 메모리누전이나 불필요한 동작을 회피하기 위한 몇 가지 유용한 방법이 있습니다.

  • $onmethod는 이벤트청취자 등록을 취소하기 위해 호출할 수 있는 함수를 반환합니다.나중에 사용할 수 있도록 등록 해제 함수를 변수로 저장할 수 있습니다.var cleanUpFunc = $scope.$on('yourevent', ...);다음의 메뉴얼을 참조해 주세요.$on: http://docs.angularjs.org/api/ng.$rootScope.Scope#$on

  • 스코프가 Angular(즉, 컨트롤러가 파괴됨)에서 청소될 때마다$destroy이벤트가 그 스코프에서 실행됩니다.에 등록할 수 있습니다.$scope$destroy이벤트 및 전화 문의cleanUpFunc그것으로부터.

이 두 가지 유용한 정보를 결합하여 구독을 올바르게 정리할 수 있습니다.예를 들면, http://plnkr.co/edit/HGK9W0VJGip6fhYQQBCg?p=preview 입니다.코멘트 아웃을 하면cleanUpFunc();토글과 작업 수행 버튼을 여러 번 누르면 이벤트 핸들러가 여러 번 호출되는 것을 알 수 있습니다.이것은 그다지 바람직하지 않습니다.

그 후, 특정의 상황을 올바르게 동작시키려면 , 에서 코드를 변경해 주세요.QuestionsStatusController2다음과 같습니다.

angular.module('test')
   .controller('QuestionsStatusController2',
   ['$rootScope', '$scope', '$resource', '$state',
   function ($rootScope, $scope, $resource, $state) {

    var cleanUpFunc = $rootScope.$on('action2@QuestionStatusController1', function {
         //write your listener here
    });

    $scope.$on('$destroy', function() {
        cleanUpFunc();
    });

   }]);

전화로cleanUpFunc()$destroy의 이벤트 청취자action2@QuestionStatusController1컨트롤러가 청소되었을 때 이벤트가 해제되어 메모리 누수가 발생하지 않게 됩니다.

로컬에 청취자를 등록합니다.$scope,가 아니라$rootScope컨트롤러가 분리되면 리스너는 자동으로 파기됩니다.

공개하려면

// EXAMPLE PUBLISHER
angular.module('test').controller('CtrlPublish', ['$rootScope', '$scope',
function ($rootScope, $scope) {

  $rootScope.$broadcast('topic', 'message');

}]);

구독을 신청

// EXAMPLE SUBSCRIBER
angular.module('test').controller('ctrlSubscribe', ['$scope',
function ($scope) {

  $scope.$on('topic', function (event, arg) { 
    $scope.receiver = 'got your ' + arg;
  });

}]);

플런커

다음은 등록 해제 로직에 대한 소스 코드입니다.다음 작업을 수행할 수 있습니다.

$rootScope.$on('action2@QuestionStatusController1', function () {
    $rootScope.$$listeners['action2@QuestionStatusController1'] = [];
})

또는 에서 반환된 등록 해제 함수를 호출합니다.$on()

var deregistration = $rootScope.$on('action2@QuestionStatusController1', function () {
    deregistration();
})
$scope.$on('saveCancelLeadInfo', function (event, args) {

        if ($scope.$$listenerCount["saveCancelLeadInfo"] > 1) {

            $scope.$$listenerCount["saveCancelLeadInfo"] = 0;

        } });

언급URL : https://stackoverflow.com/questions/18856341/how-can-i-unregister-a-broadcast-event-to-rootscope-in-angularjs

반응형