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 ?

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 ?

• javascript
• jquery
• angularjs

• Possible duplicate of unbind ng-click dynamically from element : angularjs – rrk Commented Jun 16, 2016 at 10:28
• What about adding a condition in your ng-click function back in the controller? – AranS Commented Jun 16, 2016 at 10:30
• Why not add ng-disabled which evaluates to your condition – ebram khalil Commented Jun 16, 2016 at 10:31

3 Answers 3

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./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
    pile: function(element, attr) {
      attr.ngClick = null;
    }
  }
});

<script src="https://ajax.googleapis./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>

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 piled first.

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

I was so close.. find a solution ..

var temp = $(result.element).removeAttr('ng-click');
$(result.element).replaceWith(temp);

I just need to replace old element with new one but before that , must remove attribute and then it's working.