Comment rendre conditionnel un événement ng-click?

J'ai ce code dans ng-repeat:

<a href="#" class="disabled" ng-click="doSomething(object)">Do something</a>

Comment faire en sorte que le bouton soit désactivé alors qu'il l'a fait class="disabled"?

Ou y a-t-il un moyen de le faire en Javascript pour que cela ressemble à:

$('.do-something-button').click(function(){
  if (!$(this).hasClass('disabled')) {
    do something
  }
});

Il n'est pas bon de manipuler avec DOM (y compris la vérification des attributs) à n'importe quel endroit sauf les directives. Vous pouvez ajouter à la portée une valeur indiquant si le lien doit être désactivé.

Mais un autre problème est que ngDisabled ne fonctionne sur rien d'autre que les contrôles de formulaire, vous ne pouvez donc pas l'utiliser avec <a>, mais vous pouvez l'utiliser avec <button> et le styliser comme lien.

Une autre façon consiste à utiliser l'évaluation paresseuse d'expressions telles isDisabled || action()que l'action ne serait pas appelée si elle isDisabledest vraie.

Voici les deux solutions: http://plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview

Nous pouvons ajouter un événement ng-click de manière conditionnelle sans utiliser de classe désactivée.

HTML:

<div ng-repeat="object in objects">
<span ng-click="!object.status && disableIt(object)">{{object.value}}</span>
</div>

J'utilise l'expression && qui fonctionne parfaitement pour moi.

Par exemple,

<button ng-model="vm.slideOneValid" ng-disabled="!vm.slideOneValid" ng-click="vm.slideOneValid && vm.nextSlide()" class="btn btn-light-green btn-medium pull-right">Next</button>

Si la valeur vm.slideOneValidest false, la deuxième partie de l'expression n'est pas déclenchée. Je sais que cela met la logique dans le DOM, mais c'est un moyen rapide et sale de désactiver ng et de ng-cliquer pour placer nice.

N'oubliez pas d'ajouter ng-model à l'élément pour que ng-disabled fonctionne.

En gros, il ng-clickvérifie d'abord isDisabledet en fonction de sa valeur, il décidera si la fonction doit être appelée ou non.

<span ng-click="(isDisabled) || clicked()">Do something</span>

OU lisez-le comme

<span ng-click="(if this value is true function clicked won't be called. and if it's false the clicked will be called) || clicked()">Do something</span>

Vous pouvez essayer d'utiliser ng-class.
Voici mon exemple simple:
http://plnkr.co/edit/wS3QkQ5dvHNdc6Lb8ZSF?p=preview

<div ng-repeat="object in objects">
  <span ng-class="{'disabled': object.status}" ng-click="disableIt(object)">
    {{object.value}}
  </span>
</div>

Le statut est un attribut personnalisé de l'objet, vous pouvez le nommer comme vous le souhaitez.
Le disabledin ng-classest un nom de classe CSS, le object.statusdevrait être trueoufalse

Vous pouvez changer l'état de chaque objet en fonction disableIt.
Dans votre contrôleur, vous pouvez faire ceci:

$scope.disableIt = function(obj) {
  obj.status = !obj.status
}

J'ai également eu ce problème et j'ai simplement découvert que si vous supprimez simplement le "#", le problème disparaît. Comme ça :

<a href="" class="disabled" ng-click="doSomething(object)">Do something</a>