In an Angular directive, how do you reapply an event listener after the event has been removed?

Question

This might be a result of me lacking knowledge in Angular and if so, forgive me in advance if that is the case.

In Angular, suppose I have a directive which is bound to an element as an attribute.

<div my-directive></div>

In the directive, I have a click event which will remove the click event itself.

app.directive("myDirective", function() {
   return {
      link: function(scope, ele, attr, ctrl) {
          ele.on("click", function() {
              ele.off("click");
              console.log("Click event removed");
          });
      }
   }
});

I want to set the click event on to the same div from this directive again (let's say after a button is clicked). How do I accomplish this?

Answer 1

You can use like this-

app.directive("myDirective", function() {
   return {
      link: function(scope, ele, attr, ctrl) {
          ele.on("click", function() {
              ele.unbind("click");
              console.log("Click event removed");

             angular.element(ele).bind("click");
          });

      }
   }
});

Answer 2

app.directive("myDirective", function() {
   return {
      link: function(scope, ele, attr, ctrl) {
          ele.on("click", function() {
              angular.element(ele).off('click');
              console.log("Click event removed");
          });
      }
   }

});