Question

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

问题是，即使按钮是doSomething()，AngularJS仍会执行ng-click中定义的函数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

您是否尝试使用按钮元素而不是锚点？

<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。

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

1 个答案: