如何使用AngularJS使图像链接不可点击
How can I make an image link unclickable using AngularJS?
我有一个图像,它有一个相关的操作(使用ng-click):
<a href="#" ng-click="doSomething($event)">
<img src="myImage.png">
</a>
在某些情况下,我希望它能被解开(并变灰,但之后我会担心)。本质上相当于使用ng-disabled/enabled(这不起作用,因为disabled不是锚点元素的属性)。像这样(用一个更复杂的表达式代替"true"):
<a href="#" ng-click="doSomething($event)" ng-disabled="true">
<img src="myImage.png">
</a>
有办法做到这一点吗?
请看演示http://jsbin.com/nadexu/6/edit
你可以使用css和设置不透明度,只使用一个指令ng类,使链接"不可阅读"
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>
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>
因此,每隔单击一次图像就会执行该操作,每隔单击一下图像就会变灰。
这就是你想要的吗?
我会删除超链接,并使用点击图像本身
<img src="myImage.png"
ng-click="image_clicked || do_something()"
ng-disabled="image_clicked"></img>
尽管有很多方法可以做到这一点,但一种选择是使用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开关等
此处
<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>
我希望这能奏效,我的意思是,这个想法是停止点击传播,这里有关于它的更有趣的解决方案,使用指令。我如何制作一个AngularJS指令来停止传播?。
相关文章:
- 如果显示当前图像,则禁用链接
- Javascript图像链接
- 更改标记.js图像/链接表达式
- 如何使用javascript从文件夹中获取图像并发布直接链接
- 当页面包含指向一个图像的多个链接时,fancyBox会复制缩略图辅助图像
- PNG图像被覆盖,但每个图像都有一个链接可以更改,每次一个-Javascript/jQuery/CSS
- javascript 将 IMG 标签中的图像转换为 标签中的实际链接图像
- 一键在一个窗口中打开两个不同的链接图像
- 如何使用 jquery 调整超链接图像的大小
- 重写:导航链接图像按钮效果
- 切片盒,链接图像
- 悬停时更改链接图像
- 在Javascript中使用href=mailto链接图像
- 鼠标悬停时链接图像
- 链接图像到网页链接
- 超链接图像不显示Chrome扩展
- 基于ALT标签的链接图像
- 在基于活动链接图像的导航中改变背景位置
- 将文本和超链接图像添加到表格单元格
- 如何在此代码片段中定位链接图像而不是链接文本