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

Question

Problem is that ng-click works on so event if cancelTicket === false it still fires ng-click. How can I stop that?

Answer 1

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.