当禁用div（ng）时，ng-click仍会触发

Question

问题是ng-click适用于so事件，如果cancelTicket === false它仍会触发ng-click 。 我怎么能阻止它？

<div class="btn-block save-changes padding-10" ng-class="{'gray':cancelTicket===false,'secondary-button':cancelTicket===true}" ng-click="CancelTicket(ticketPin)" ng-disabled="cancelTicket===false" style="display: table;">
    <div class="button-container padding3" ng-class="{'pointer':cancelTicket===true}">
        <button-spinner promise="cancelPromise"></button-spinner>
        <div style="display: inline-block !important;"> @Translator.Translate("CANCEL") </div>
    </div>
</div>

Answer 1

即使div被禁用，也会触发事件。

您可以通过使用像isDisabled || action()这样的表达式的惰性求值来避免这种情况 isDisabled || action()所以如果isDisabled为true则不会调用isDisabled 。

在你的情况下，它将是：

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

Answer 2

您应该将DIV标记更改为Button Tag。 这个对我有用。

Answer 3

当一个元素，您可以禁用点击事件ng-click被disabled 。

jQuery的：

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

对所有DOM元素执行此操作可能会产生不需要的结果 此外，您需要在DOM上更新的任何新HTML上运行上述操作。

相反，我们可以修改按钮以按预期工作。

角度：

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();
                  }
              });
          }
     }
});

我不会对div元素执行上述操作，因为它会很重。 而是修改您的方法，以便button元素仅用于可点击的交互。 然后，您可以将它们设置为与其他div元素一样。

Answer 4

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

将标签更改为按钮标签，然后单击确定

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

Answer 5

我的解决方案是使用带有属性而不是ng-click的html指令，这样做

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

并且指令定义如下：

1）模板：

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

2）控制器：

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();
                }
            };

        }
    };
});