Jak uzależnić zdarzenie ng-click?

Mam ten kod wewnątrz ng-repeat:

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

Jak ustawić warunek, że przycisk jest wyłączony, gdy ma class="disabled"?

Czy jest sposób na zrobienie tego w JavaScript, który będzie wyglądał następująco:

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

Nie jest dobrze manipulować DOMem (włączając w to sprawdzanie atrybutów) w jakimkolwiek miejscu poza dyrektywami. Możesz dodać do zakresu wartość wskazującą, czy łącze powinno być wyłączone.

Ale innym problemem jest to, że ngDisabled nie działa na niczym poza kontrolkami formularzy, więc nie możesz go używać z <a>, ale możesz użyć go z <button> i nadać mu styl jako link.

Innym sposobem jest użycie leniwej oceny wyrażeń, takich isDisabled || action()jak działanie, które nie będzie wywoływane, jeśli isDisabledjest prawdziwe.

Oto oba rozwiązania: http://plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview

Możemy warunkowo dodać zdarzenie ng-click bez używania wyłączonej klasy.

HTML:

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

Używam wyrażenia &&, które idealnie mi pasuje.

Na przykład,

<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>

Jeśli vm.slideOneValidjest fałszywe, druga część wyrażenia nie jest uruchamiana. Wiem, że to jest wprowadzenie logiki do DOM, ale jest to szybki i brudny sposób na wyłączenie ng i ng-click, aby umieścić ładne.

Pamiętaj tylko, aby dodać ng-model do elementu, aby funkcja ng-niepełnosprawnych działała.

Zasadniczo ng-clicknajpierw sprawdza isDisabledi na podstawie jej wartości zdecyduje, czy funkcja powinna zostać wywołana, czy nie.

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

LUB przeczytaj to jako

<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>

Możesz spróbować użyć ng-class.
Oto mój prosty przykład:
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>

Status to niestandardowy atrybut obiektu, możesz go nazwać dowolnie. W to nazwa klasy CSS, powinny być albo
disabledng-classobject.statustruefalse

Możesz zmienić status każdego obiektu w funkcji disableIt.
W swoim kontrolerze możesz to zrobić:

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

Miałem również ten problem i po prostu dowiedziałem się, że jeśli po prostu usuniesz „#”, problem znika. Lubię to :

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