How to prevent an a element's click event what bind by angular?

Question

I have an a element like this

<a class='btn' ng-click="alert('clicked')"></a>

in js

$scope.alert=(item)=>{alert(item)};

I had tested use ng-disabled but dose not work. this is my html this is my directive

I have many a element in my project so I want to write a directive like ng-disable how to write it?

score 1 · Answer 1 · answered Oct 22 '16 at 07:19

1

pass the $event object to the function, and you can do it like this,

<a class='btn' ng-click="alert($event,clicked)"></a>

and in Controller

$scope.alert = function ($event,clicked) {
  if (you want to stop) {
    $event.stopPropagation();
  } 
};

answered Oct 22 '16 at 07:19

Sajeetharan

216,225
63
350
396

I have many a element like this , so i want to resolve this like use ng-disable ,do you have any good suggestion? thanks.. – Potato Running Oct 22 '16 at 07:21
You do not need a directive for that you can just do $event.stopPropagation(); – Sajeetharan Oct 22 '16 at 07:24
– Sajeetharan Oct 22 '16 at 07:24
if you still want look at this answer http://stackoverflow.com/questions/23366134/how-to-stop-ng-click-from-a-custom-directive-in-angularjs – Sajeetharan Oct 22 '16 at 07:30

Sravan · Answer 2 · 2016-10-22T12:39:58.617

0

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
  $scope.alert=(item)=>{alert(item)}
  
  $scope.click = false
  $scope.click_two = true
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
  <body ng-app="myApp">
    <div ng-controller="MyCtrl">
   <a style=" color: red" ng-click="!click||alert('Test')">Click on this and this will not alert</a>   <br> <br> 
   <a style=" color: blue" ng-click="!click_two||alert('Test')">Click on this and this  Will alert</a>    
</div>
  </body>

when the value of click is true then the function will be called else will not get called

Please click on both anchor tags to find the difference

in your controller,

$scope.click = false;

Here is the fiddle

edited Oct 22 '16 at 12:39

answered Oct 22 '16 at 07:21

Sravan

18,467
3
30
54

the downvoter, please run the snippet and check the fiddle, the are working fine – Sravan Oct 22 '16 at 07:37
@Potato Running, please run my snippet. do you find anything wrong in it? – Sravan Oct 22 '16 at 07:42
@Potato Running, is there anything wrong in my snippet? – Sravan Oct 22 '16 at 12:28

georgeawg · Answer 3 · 2016-10-22T12:50:26.010

0

Don't use interpolation in the ng-disabled directive.

<!--ERRONEOUS -->
<button ng-click="clicks=clicks+1" ng-disabled="{{checked}}">Button</button>

<!--CORRECT -->
<button ng-click="clicks=clicks+1" ng-disabled="checked">Button</button>

Using interpolation (double curly brackets) converts the boolean to a string. The string "false" is truthy. This is a quirk of JavaScript. Don't use interpolation in the ng-disabled directive.

THE DEMO on PLNKR

edited Oct 22 '16 at 12:50

answered Oct 22 '16 at 12:32

georgeawg

48,608
13
72
95

I want to use in a element not button , button is no problem now. – Potato Running Oct 24 '16 at 03:15

score 0 · Accepted Answer · edited May 13 '21 at 15:32

0

I think this is the way to solve the problem,thank you for all of you to help me solve the problem~

    .directive('a', function() {
        return {
         restrict: "E",
         replace: true,
         scope: {

        },
        link: function(scope, elem, attr) {
            if (attr['ngDisabled']) {
                elem.unbind('click');
            }
        }
    }
});

edited May 13 '21 at 15:32

Marty

302
4
18

answered Oct 24 '16 at 03:31

Potato Running

408
4
11

How to prevent an a element's click event what bind by angular?

4 Answers4