css - 禁用并在视觉上禁止打开模式对话框的按钮

Question

我将 Bootstrap 与 AngularJS 结合使用。在我的应用程序中，链接用于打开模式对话框(使用 data attributes 概念)。我想根据状态变量或函数禁用按钮。

问题是，AngularJS 仍然执行 ng-click 中定义的函数 doSomething()，即使按钮被 ng-disabled .我可以通过实现一个守卫来解决这个问题，它基本上检查与 ng-disabled 属性中使用的变量相同的变量。这会阻止 ng-click 中的代码被执行(好吧，从技术上讲它被执行了，但我的函数不会触发)。

但是，模态对话框仍会打开，因为 data-* 属性不遵守 ng-disabled 的值。相反，它们依赖于 CSS 类 disabled。我还可以使用 ng-class 设置该 CSS 类。你还在吗？ :-)

目前，我的代码如下所示:

<a href="#showModalDialog" class="btn btn-success btn-md" ng-class="{ 'disabled': !isSomeState() }" data-toggle="modal"
  ng-click="!isSomeState() || doSomething()" ng-disabled="!isSomeState()">
  <span class="fa fa-foobar"></span>
</a>

Bootstrap 的 CSS 类 disabled 将设置 pointer-events: none; 这对点击来说很好。当按钮被禁用时，模态对话框将不再打开。但是 Bootstrap 曾经在禁用的用户控件上将鼠标指针更改为 禁止 标志。然而，当 pointer-events: none; 被设置时，鼠标指针将不再改变。这破坏了我的用户界面的一致性。

有什么解决办法吗？我想拥有

• 按钮在视觉上被禁用，
• 它应该有一个禁止标志作为鼠标悬停时的指针，
• 当按钮被禁用时，ng-click 不应执行我的功能
• 此外，模态对话框不应打开。

因为今天是圣诞节，我正在寻找一个简单的解决方案，即我不想重写 Bootstrap 和 AngularJS 的主要部分。我有很多这样的模态对话框

Answer 1

您是否尝试过使用按钮元素而不是 anchor ？

<button class="btn btn-success btn-md"
    data-target="#showModalDialog" data-toggle="modal"
    ng-click="doSomething()" ng-disabled="!isSomeState()">
    <span class="fa fa-foobar"></span>
</button>

当然，如果您依赖 URL 进行更改，则现在必须将其包含在您的 JS 中，而不是使用 href。