AngularJS directive $document click event is firing for all instances everytime

Question

I want to attach an event to the document. when document is clicked I want to remove my directive element. but it is firing for all past instances also.

Below is the code:

link: function(scope, iElement, iAttrs) {
      $document.on('click',function(){
          iElement.slideUp('fast',function(){
              $(this).remove();
          });
      });
    }

Answer 1

Try to remove the handler in the destroy handelr

link: function (scope, iElement, iAttrs) {
    function handler() {
        iElement.slideUp('fast', function () {
            $(this).remove();
        });
    }

    $document.on('click', handler);
    scope.$on('$destroy', function () {
        $document.off('click', handler);
    })
}

Answer 2

When you add jQuery events like this, the event will stay alive even after the directive is destroyed. You have to specifically turn the event off like this:

link: function(scope, iElement, iAttrs) {
  $document.on('click',function(){
      iElement.slideUp('fast',function(){
          $(this).remove();
          $document.off('click');
      });
  });
}