How to make an image clickable and execute function? - angularjs

Question

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.

Answer 1

With angular you should use ng-click.
try ng-click="myFunction()"

Answer 2

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

Answer 3

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

Answer 4

What you are looking for is event binding in Angular. Read more about this from Angular documentation.
<img [src]="yourVariable" (click)="yourFunction()">

Answer 5

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.