ng-click still fires when div is (ng)disabled

Event is triggered even if the div is disabled.

You can avoid this by using lazy evaluation of expressions like isDisabled || action() so action would not be called if isDisabled is true.

In your case it will be:

ng-click="cancelTicket === false || CancelTicket(ticketPin)"

You should change DIV tag to Button Tag. It works for me.


You can disable click events when an element with ng-click is disabled.

jQuery:

$('*[ng-click]').on('click',function(event) {
     var $el = $(event.target);
     if($el.attr('disabled')) {
        event.stopPropagation();
     }
});

Doing this on all DOM elements could produce unwanted results. Also, you will need to run the above on any new HTML updated on the DOM.

Instead, we can modify just buttons to work as expected.

Angular:

angular.module('app').directive('button',function() {
     return {
          restrict: 'E',
          link: function(scope,el) {
              var $el = angular.element(el);
              $el.bind('click', function(event) {
                  if($el.attr('disabled')) {
                      event.stopImmediatePropagation();
                  }
              });
          }
     }
});

I would not do the above on div elements as it would be to heavy. Instead, modify your approach so that button elements are only used for clickable interactions. You can then style them to look like other div elements.