How to stop ng-click from a custom directive in AngularJS?

Question

LIVE DEMO

Consider the following myButton directive:

angular.module(\"Demo\", []).directive(\"myButton\", function() {
  return {
    re         


        

Answer 1

Try this in your link function:

link: function(scope, element, attrs) {
      var clickHandlers = $._data(element[0]).events.click;

      clickHandlers.reverse(); //reverse the click event handlers list

      element.on('click', function(event) {
        if (scope.disabled) {
          event.stopImmediatePropagation(); //use stopImmediatePropagation() instead of stopPropagation()
        }
      });

      clickHandlers.reverse(); //reverse the list again to make our function at the head of the list
}

DEMO

This solution uses jQuery to deal with cross browser problems. The idea here is to attach our event handler at the head of the click handlers list and use stopImmediatePropagation() to stop current handlers of the same event and bubbling event.

Also take a look at this: jquery: stopPropagation vs stopImmediatePropagation