角度コンポーネントでクリックリスナーの登録を解除するにはどうすればよいですか？

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

"コンポーネントを破壊する" ボタンをクリックするとNG-場合に、コンポーネントがDOM（から削除されます）、$ onDestroyがトリガーされます。私は$ onDestroyにクリックイベントの登録を抹消したいが、何も起こらない。

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