Question

我只是想让图像可点击并执行功能。这是我的代码：

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

但该功能未在点击事件上执行。

Answer 1

使用角度，您应该使用ng-click。

尝试ng-click="myFunction()"

Answer 2

你可以做到

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

Answer 3

尝试将ng-click放入<img>

例如

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

Answer 4

你不必。通过一些额外的标记，你可以做到这一点。

在标签中包裹图片
设置隐藏按钮ID
按钮点击

对于残障人士，这将是一个更强大的可访问解决方案。使用这个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>

并添加一些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;
}

这是一个代码库，显示了如何 - http://codepen.io/bitlinguist/pen/bEJvoz

您可以使用角度指令轻松采用此方法。

如何使图像可点击并执行功能？

4 个答案: