CODEWITHSUNDEEP
angularjsionic-framework
user2985035
user2985035

Reputation: 569

How to make an image clickable and execute function?

I'm simply trying to make an image clickable and execute function. Here is my code:

<button class="button button-stable button-clear" on-click="myFunction()">
<img src="image.png" >
</button>

But the function is not executing on the click event.

Upvotes: 4

Views: 18019

Answers (5)

Janakiin
Janakiin

Reputation: 1

What you are looking for is event binding in Angular. Read more about this from Angular documentation.

<img [src]="yourVariable" (click)="yourFunction()">

Upvotes: 0

dewwwald
dewwwald

Reputation: 297

You don't have to. With a little extra markup you can do this.

  • Wrap image in label
  • set for to a hidden button id
  • run js on button click

Doing this will be a more accessible solution for people with disabilities. Use this html.

<!--html-->
<label for="image-click">
  <img src="http://lorempixel.com/100/100" alt="" />
</label>
<button id="image-click" 
  onclick="myFunction()" 
  class="visuallyhidden">
  Click to run image
</button>

And add some css.

//css
.visuallyhidden {
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}
label {
  cursor: pointer;
}

Here is a codepen that shows how - http://codepen.io/bitlinguist/pen/bEJvoz

You can just as easily adopt this approach with angular directives.

Upvotes: -1

Sha Alibhai
Sha Alibhai

Reputation: 881

you can do

<img src="image.png" ng-click="myFunction()" />

Upvotes: 3

Mike Feltman
Mike Feltman

Reputation: 5176

With angular you should use ng-click.

try ng-click="myFunction()"

Upvotes: 4

AdsHan
AdsHan

Reputation: 465

try put ng-click in <img>

For example

<img class="button " ng-src="{{i.imagem}}" ng-click="myFunction($index)"></img>

Upvotes: 0

Related Questions