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();
          });
      });
    }

take a look: http://stackoverflow.com/questions/14898296/how-to-unsubscribe-to-a-broadcast-event-in-angularjs-how-to-remove-function-reg — Ivan Chernykh, May 02 '14 at 11:07

Arun P Johny · Answer 1 · 2014-10-22T17:51:57.247

8

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);
    })
}

edited Oct 22 '14 at 17:51

answered May 02 '14 at 11:08

Arun P Johny

384,651
66
527
531

"scope" doesn't have method "on". I get an error: "TypeError: undefined is not a function" – Eugene Kuzmin Oct 22 '14 at 17:40
2

@EugeneKuzmin sorry `scope.$on()` – Arun P Johny Oct 22 '14 at 17:51

score 4 · Accepted Answer · answered May 02 '14 at 11:08

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');
      });
  });
}

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

2 Answers2