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 should change DIV tag to Button Tag. It works for me.

Answer 2

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.

Answer 3

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)"

Answer 4

<a class="btn btn-danger btn-xs" ng-click="vm.handleRemove(device)" ng-disabled="status === 1">Delete</a>

Change a tag to button tag then OK

<button class="btn btn-danger btn-xs" ng-click="vm.handleRemove(device)" ng-disabled="status === 1">Delete</button>

Answer 5

My solution has been to use an html directive with an attribute used instead of ng-click, so that

<html-tag-directive new-click="ctrl.functionToCall()" disabled="ctrl.disabled" >

and the directive defined as follow:

1) template:

<button type="button" 
   ng-disabled="disabled" ng-click="onClick()">
</button>

2) controller:

angular.module('module')
.directive('htmlTagDirective',function() {
    return {
        restrict:'E',
        templateUrl:'template.html',
        scope:{
            disabled:'=',
            click: '&'
        },
        link:function(scope,element){

            scope.onClick = function() {
                if (!(scope.disabled)) {
                    scope.newClick();
                }
            };

        }
    };
});