javascript - 禁用 ng-click HTML DOM 元素

Question

我有一个 <a>具有 ng-click 的元素属性。在某些情况下，我想禁用 ng-click在这个元素上。我正在使用 jquery 来查找这个元素，我试图通过各种可能的方式停止点击。例如:return false ; event.stopPropagation()等等。另外，我删除了ng-click带有

的属性

$(element).removeAttr('ng-click');

，但事件仍在触发。是否可以停止(禁用)ng-click通过 jquery？

Answer 1

第一个选项

您始终可以在 anchor 元素上添加 disabled 属性以防止触发 ng-click。添加 disabled 属性时还需要使用 CSS。请参阅下面的工作示例

var app = angular.module("sa", []);

app.controller("FooController", function($scope) {

  $scope.sayHello = function() {
    alert("Hello!!");
  };
});

a[disabled] {
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa" ng-controller="FooController">

  <a href="" disabled ng-click="sayHello()">Say Hello</a>
</div>

第二个选项

您可以使用指令删除 ng-click。但这不适用于 jQuery，即如果您使用 jQuery 添加此指令，它将不起作用。

var app = angular.module("sa", []);

app.controller("FooController", function($scope) {

  $scope.sayHello = function() {
    alert("Hello!!");
  };
});

app.directive("disableclick", function() {
  return {
    restrict: 'A',
    priority: 1000,    // setting higher priority to let this directive execute before ngClick
    compile: function(element, attr) {
      attr.ngClick = null;
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa" ng-controller="FooController">

  <a href="" disableclick ng-click="sayHello()">Say Hello</a>
</div>