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

Answer 3

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.