Angularjs 单击链接文本/图像后如何使其变暗？

我正在用angularjs和ionic框架设计一个移动应用程序。感知到的响应性很重要，所以我想实现一个功能，使单击的项目变暗。因此：项目不透明度1->用户单击图像->将项目不透明度设置为例如0.5->将用户重定向到href地址

如何在角度/离子框架方式下实现这一点

下面是一个代码片段，它在某种程度上起作用，但会造成50毫秒的延迟。另外，preventDefault（）和window.location.href可能不是最好的使用方法（没有使用$location）。角度动画/css可以用于相同的效果吗？可以以某种方式将其应用于所有链接，以便不需要单独的动画单击属性

<a animate-click href="someaddress"><img src="somesrc"></a>

---

您不需要指令来处理此问题：

<a href="#" ng-click="dimMe = true" ng-class="{dimmed: dimMe}" ng-disabled="dimMe">
    <img src="http://lorempixel.com/100/100/"></a>

因此，当您单击此链接时，它会将dimMe设置为true，这将添加dimMe类并禁用该链接

---

添加一个工作

指令或全局是首选，因为该功能应该在应用程序中的大多数链接中。我试过截取代码，但没有成功（无论是在a还是img中）。浏览器是否跳过不透明度设置？“无论如何，我们要转到另一个页面，让我们跳过所有其他ui修改内容”我更新了此逻辑，如果此功能广泛使用，您可以将其移动到指令中。谢谢。现在它正在工作，但在50%的情况下可以看到暗淡的效果。使用Chrome或Android webView时也是如此。我刚刚用一个指令实现完成了对fiddle的更新。。。如果不透明度不起作用，请查看其他浏览器细节，如-filter:alpha（不透明度=50）；

<a href="#" ng-click="dimMe = true" ng-class="{dimmed: dimMe}" ng-disabled="dimMe">
    <img src="http://lorempixel.com/100/100/"></a>

.dimmed{ opactiy: 0.5; }