ng-当div (Ng)禁用时，单击“静态触发”。

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是true，就不会调用操作。

就你而言，情况将是：

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

Answer 2

您应该将DIV标记更改为Button标记。对我来说很管用。

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元素。