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.