Ng-click по-прежнему срабатывает, когда div (ng) отключен

Проблема в том, что 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>

Ответ 1

Событие запускается, даже если div отключен.

Вы можете избежать этого, используя ленивую оценку выражений типа isDisabled || action(), поэтому действие не будет вызываться, если isDisabled - true.

В вашем случае это будет:

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

Ответ 2

Вы должны поменять тег DIV на тег кнопки. Это работает для меня.

Ответ 3

Вы можете отключить события кликов, когда элемент с ng-click равен disabled.

JQuery

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

Выполнение этого на всех элементах DOM может привести к нежелательным результатам. Кроме того, вам нужно будет запустить вышеуказанное на любом новом HTML, обновленном в DOM.

Вместо этого мы можем изменять только кнопки для работы, как ожидалось.

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

Я бы не сделал выше на элементах div, поскольку это было бы тяжело. Вместо этого измените свой подход, чтобы элементы button использовались только для интерактивных взаимодействий. Затем вы можете их стиль выглядеть как другие элементы div.

Ответ 4

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

Измените тег на тег кнопки, затем OK

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

Ответ 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();
                }
            };

        }
    };
});