ng-clic fa ancora fuoco quando div è (ng) disabilitato

Question

Il problema è che ng-click funziona su così evento se cancelTicket === false continua a sparare ng-click. Come posso smettere?

<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

L'evento viene attivato anche se div è disattivato.

È possibile evitare questo utilizzando la valutazione lazy di espressioni come isDisabled || action() in modo che l'azione non venga chiamata se isDisabled è true.

Nel tuo caso sarà:

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

Answer 2

È possibile disattivare eventi click quando un elemento con ng-click è disabled.

jQuery:

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

Fare questo su tutti gli elementi DOM potrebbe produrre risultati indesiderati. Inoltre, dovrai eseguire quanto sopra su qualsiasi nuovo HTML aggiornato sul DOM.

Invece, possiamo modificare solo i pulsanti per funzionare come previsto.

angolare:

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

non vorrei fare quanto sopra sul div elementi come sarebbe troppo pesante. Invece, modifica l'approccio in modo che gli elementi button vengano utilizzati solo per le interazioni selezionabili. Puoi quindi modellarli per assomigliare agli altri elementi div.

Answer 3

È necessario modificare il tag DIV in Tag Button. Funziona per me.