How can I make an image link unclickable using AngularJS?

Question

I have an image that has an action associated with it (using ng-click):

   <a href="#" ng-click="doSomething($event)">
       <img src="myImage.png">
   </a>

Under some circumstances, I would like it to be unclickable (and greyed out, but I can worry about that after). Essentially the equivalent of using ng-disabled/enabled (which won't work, since disabled isn't a property of anchor elements). Like this (substituting a more complicated expression for the "true"):

 <a href="#" ng-click="doSomething($event)" ng-disabled="true">
       <img src="myImage.png">
   </a>

Is there any way to do this?

Answer 1

Please see that demo http://jsbin.com/nadexu/6/edit

you can make link 'unclicable' using css together with setting opacity, using only one directive ng-class

a.disabled {
   pointer-events: none;
   cursor: default;

  opacity:0.5
}
a.enable {

    opacity:1

}

HTML:

 <a href="" ng-click="doSomething($event)"   ng-class="{'enable': enable,'disabled': !enable }"
    >
       <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDlD8Xc_e4xZJeDGlyHF3KkeKibtex6qXwGzlM_w_-7WV-NrPf"/>
   </a>

Answer 2

http://plnkr.co/edit/vsz8bnhVRCwYxeijEPlq?p=preview

<a 
  ng-click="(toggle = !toggle) && doSomething($event)" 
  ng-disabled="toggle" 
  ng-style="{ opacity: { true: 0.5, false: 1 }[toggle == true] }">
    <img src="https://www.google.com/images/srpr/logo11w.png">
</a>

So the action is performed every other time the image is clicked and the image is grayed out every other click.

Is that what you wanted?

Answer 3

I would remove the hyperlink and use ng-click on the image itself

<img src="myImage.png" 
ng-click="image_clicked || do_something()" 
ng-disabled="image_clicked"></img>

Answer 4

Although there are a lot of ways to do this, one option would be to use an ng-if statement to have two different ui elements rendered, one with hyperlink, one with just the image (making it unclickable)

<div ng-if="condition is true">
    <a href="#" ng-click="doSomething($event)" ng-disabled="true">
       <img src="myImage.png">
   </a>
</div>
<div ng-if="condition is false">
    <img src="myImage.png">
</div>

There are other options like ng-switch, etc

here

Answer 5

<a ng-show="someBool" href="#" ng-click="doSomething($event)" ng-disabled="true">
  <img src="myImage.png">
</a>

<a ng-show="!someBool" class="greyed-out" href="#" ng-click="doSomething($event) $event.stopPropagation();" >
  <img src="myImage.png">
</a>

I hope this works, I mean, the idea is stop the click propagation, here are more interesting solution about it using directives How can I make an AngularJS directive to stopPropagation?.