Disable ng-click on HTML DOM element

Question

I have an <a> element which has ng-click attribute. On certain conditions, I want to disable ng-click on this element. I'm using jquery to find this element and I'm trying to stop click by every possible way. For example : return false ; event.stopPropagation() and etc. Also, I remove ng-click attribute with

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

,but event still firing. Is it possible to stop (disable) ng-click by jquery ?

Answer 1

First Option

You can always add disabled attribute on the anchor element to prevent ng-click from triggering. You also need to use CSS when adding disabled attribute. See the working example below

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>

Second option

You can make use of a directive to remove ng-click. But that will not work with jQuery i.e. if you add this directive using jQuery, it won't work.

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>

Answer 2

If you want to do it the Angular way you should use ng-disabled on the element like:

<a ng-click="someClickHandler()" ng-disabled="isDisabled">Link</a>

Replacing elements in the DOM is a very bad idea unless you know what you are doing. If there are any bindings the element need to be compiled first.

If this doesn't work try to replace a element with button.