Как отменить регистрацию кликов в угловом компоненте?

Question

Как избавиться от прослушивателя кликов документа при уничтожении углового компонента?

упрощенный демонстрационный код:

<div ng-app="app"> 
    <div ng-controller="TestingCtrl as vm"> 

    <my-component ng-if="vm.showComponent"></my-component> 

    <br><br><br> 

    <button ng-click="vm.setShowState(false)"> 
     Destroy component 
    </button> 

    </div> 
</div> 

Javascipt:

angular.module('app', []) 

.controller('TestingCtrl', function TestingCtrl() { 
    this.showComponent = true; 

    this.setShowState = function(state) { 
    this.showComponent = state; 
    } 
}) 

.component('myComponent', { 
    bindings: { 
    name: '@' 
    }, 
    template: 'myComponent', 
    controller: function ($document) { 
    var listener; 

    this.$onInit = function() { 
     listener = $document.on('click', function() { 
      console.log('You clicked on the document'); 
     }); 
    } 

    this.$onDestroy = function() { 
     console.log('$onDestory triggered'); 
     $document.off('click', listener); 
    } 

    } 
}); 

Fiddle

При нажатии на кнопку "Уничтожить компонент", компонент получает удаляется из DOM (с нг-если) и $ onDestroy запускается. Я хочу, чтобы $ onDestroy отменил событие click, но ничего не происходит.

Answer 1

Вы должны передать функциональную ссылку на on & off способ как в параметре. Вам не нужно передавать ссылку на функцию целых кликов.

Код

this.$onInit = function() { 
    listener = function() { 
     console.log('You clicked on the document'); 
    }; 
    $document.on('click', listener); 
} 

this.$onDestroy = function() { 
    console.log('$onDestory triggered'); 
    $document.off('click', listener); 
} 

Demo Fiddle Здесь