我有一个与之关联的动作的图像(使用ng-click):
<a href="#" ng-click="doSomething($event)">
<img src="myImage.png">
</a>
在某些情况下,我希望它是不可点击的(灰色,但我可以担心之后)。基本上相当于使用ng-disabled / enabled(由于禁用不是锚元素的属性,因此不起作用)。像这样(用更复杂的表达式代替“true”):
<a href="#" ng-click="doSomething($event)" ng-disabled="true">
<img src="myImage.png">
</a>
有没有办法做到这一点?
答案 0 :(得分:1)
请参阅演示http://jsbin.com/nadexu/6/edit
你可以使链接“无法解决”&#39;使用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>
答案 1 :(得分:0)
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>
因此,每隔一次点击图像就会执行操作,并且每隔一次点击图像就会显示为灰色。
这就是你想要的吗?
答案 2 :(得分:0)
我会删除超链接并使用ng-click图像本身
<img src="myImage.png"
ng-click="image_clicked || do_something()"
ng-disabled="image_clicked"></img>
答案 3 :(得分:0)
尽管有很多方法可以做到这一点,但是一个选项是使用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等
答案 4 :(得分:0)
<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?更有趣的解决方案。