锚标签上的 ng-disabled 有效，但标签仍可点击答案

【问题标题】：ng-disabled on an anchor tag works but tag is still clickable锚标签上的 ng-disabled 有效，但标签仍可点击
【发布时间】：2016-08-16 13:28:23
【问题描述】：

我有一个锚标记，我通过 boostrap 的 CSS 将其用作下载按钮。我的问题是我在标签中有ng-disabled 属性，虽然它使按钮 look 被禁用，但仍然可以单击它。我有类似以下内容：

    <a class="btn btn-primary pull-right download-button" target="_self" href="/download" ng-disabled="!dlAvailable">Download</a>

href="/download" 链接取决于几个变量，我需要target="_self" 以确保页面不会重定向。是否有另一种方法可以使锚标记看起来被禁用并且在单击时也不起作用？

【问题讨论】：

你不能禁用一个链接，你只能改变它的行为：check this answer
是的！您不能使用ng-disabled 将其禁用...使用class 使其显示为禁用并使用handler 防止default-behavior
@AlexanderMac，使用 CSS a.disabled { pointer-events: none; } 实际上是我刚刚遇到并正在尝试但目前无法正常工作的东西。看起来是因为它禁用了 angularjs，而不是禁用了 html 类。
在 Angular 中，做你需要的最简单的方法是隐藏链接并使用链接文本显示跨度。但是您不能禁用链接作为按钮。
@AlexanderMac 我的另一个想法是复制按钮并使用角度来显示/隐藏假按钮。

标签： javascript angularjs

【解决方案1】：

所以这是我用来解决问题的“黑客”。我复制了该按钮，然后使用ng-show 来确定应该显示哪个按钮 - 禁用的按钮或工作按钮。

    <a class="btn btn-primary pull-right download-button disabled" target="_self" href="/download" ng-show="!downloadAvailable">download</a>
    <a class="btn btn-primary pull-right download-button" target="_self" href="/download" ng-show="downloadAvailable">download</a>

【讨论】：