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

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

• javascript
• jquery
• angularjs
• angularjs-directive

• you will have to remove the handler in the $destroy handler – Arun P Johny Commented May 2, 2014 at 11:07
• take a look: stackoverflow./questions/14898296/… – Ivan Chernykh Commented May 2, 2014 at 11:07

2 Answers 2

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

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