如何使用 AngularJS 使图像链接不可点击？答案

【问题标题】：How can I make an image link unclickable using AngularJS?如何使用 AngularJS 使图像链接不可点击？
【发布时间】：2014-10-08 21:52:19
【问题描述】：

我有一张图片，它有一个与之相关的动作（使用 ng-click）：

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

在某些情况下，我希望它无法点击（并且显示为灰色，但之后我可以担心）。本质上相当于使用 ng-disabled/enabled（这不起作用，因为 disabled 不是锚元素的属性）。像这样（用更复杂的表达式代替“真”）：

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

有什么办法吗？

【问题讨论】：

标签： javascript angularjs dom-events

【解决方案1】：

请看那个演示http://jsbin.com/nadexu/6/edit

您可以使用 css 和设置不透明度使链接“不可复制”，只使用一个指令 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>

【讨论】：

【解决方案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>

因此，每隔一次单击图像就会执行一次操作，并且每隔一次单击图像就会变灰。

这是你想要的吗？

【讨论】：

【解决方案3】：

我会删除超链接并在图像本身上使用 ng-click

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

【讨论】：

【解决方案4】：

虽然有很多方法可以做到这一点，但一种选择是使用 ng-if 语句来呈现两种不同的 ui 元素，一种带有超链接，一种只有图像（使其无法点击）

<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>

还有其他选项，例如 ng-switch 等

here

【讨论】：

【解决方案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>

我希望这行得通，我的意思是，这个想法是停止点击传播，这里有更有趣的解决方案，使用指令How can I make an AngularJS directive to stopPropagation?。

【讨论】：