Làm thế nào để tạo một sự kiện ng-click có điều kiện?

Tôi có mã này bên trong ng-repeat:

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

Làm thế nào để tạo điều kiện rằng nút bị tắt khi nó có class="disabled"?

Hoặc có cách nào để làm điều đó trong Javascript để nó trông giống như sau:

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

Sẽ không tốt khi thao tác với DOM (bao gồm cả việc kiểm tra các thuộc tính) ở bất kỳ nơi nào ngoại trừ các lệnh. Bạn có thể thêm vào phạm vi một số giá trị cho biết có nên tắt liên kết hay không.

Nhưng vấn đề khác là ngDisabled không hoạt động trên bất kỳ thứ gì ngoại trừ các điều khiển biểu mẫu, vì vậy bạn không thể sử dụng nó với <a>, nhưng bạn có thể sử dụng nó với <button> và định kiểu nó dưới dạng liên kết.

Một cách khác là sử dụng đánh giá lười biếng của các biểu thức như isDisabled || action()vậy action wouold không được gọi nếu isDisabledlà true.

Đây là cả hai giải pháp: http://plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview

Chúng ta có thể thêm sự kiện ng-click có điều kiện mà không cần sử dụng lớp bị vô hiệu hóa.

HTML:

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

Tôi sử dụng biểu thức && phù hợp với tôi.

Ví dụ,

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

Nếu vm.slideOneValidsai, phần thứ hai của biểu thức không được kích hoạt. Tôi biết điều này đang đưa logic vào DOM, nhưng đó là một cách nhanh chóng để khiến ng-disable và ng-click trở nên tốt đẹp.

Chỉ cần nhớ thêm ng-model vào phần tử để làm cho ng-disable hoạt động.

Về cơ bản, ng-clicktrước tiên hãy kiểm tra isDisabledvà dựa trên giá trị của nó, nó sẽ quyết định xem hàm có nên được gọi hay không.

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

HOẶC đọc nó là

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

Bạn có thể thử sử dụng ng-class.
Đây là ví dụ đơn giản của tôi:
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>

Trạng thái là một thuộc tính tùy chỉnh của đối tượng, bạn có thể đặt tên cho nó bất cứ thứ gì bạn muốn.
Các disabledtrong ng-classlà một tên lớp CSS, object.statusnên truehayfalse

Bạn có thể thay đổi trạng thái của mọi đối tượng trong chức năng disableIt.
Trong Bộ điều khiển của bạn, bạn có thể làm điều này:

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

Tôi cũng gặp sự cố này và tôi chỉ đơn giản phát hiện ra rằng nếu bạn chỉ cần xóa "#" thì sự cố sẽ biến mất. Như thế này :

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