Question

问题是ng-click如果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为true，则不会调用操作。

在你的情况下，它将是：

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

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

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

        }
    };
});

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

5 个答案: