为什么angular的ng-disabled无法与bootstrap的btn类一起使用？

Question

我有一个锚标记，ng-disabled指令根本不起作用。
它可以在按钮上工作，但是一旦我将Bootstrap的btn类添加到锚标记中，Angular的ng-disabled就可以正常工作了！

这如何运作？

Answer 1

ngDisabled仅适用于响应该disabled属性的元素（输入，文本区域，单选按钮，按钮标签等）。在Bootstrap中，您必须将“
disabled”类添加到btn元素中。看起来像这样：

<div class="btn btn-default disabled">I'm a button!</div>

为此，请在指令/控制器中定义一个变量，如下所示：

$scope.disableButtons = true;

然后使用angular ngClass来基于变量动态添加类，如下所示：

<div class="btn btn-default" ng-class="{'disabled': disableButtons}" ng-click="doSomething()">I'm a button!</div>

每次disableButtons在范围内更改变量时，该按钮将在视图中根据值显示为禁用或启用。

注意： 将禁用的类添加到btn元素不会阻止JS单击事件的发生。为此，您必须在doSomething()函数中编写一个钩子，如下所示：

$scope.doSomething = function() {
  if($scope.disableButtons) {
    return;
  }
  // Else, really do something
}

编辑：
看来我并没有真正回答这个问题。真正的答案（我相信）是disabled仅适用于.btn元素以及链接<a><a/>和列表<li><li/>元素（…，可能还有更多），因为这是Bootstrap定义的。这是来自Bootstrap的btn元素来源：

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
  cursor: not-allowed;
  pointer-events: none;
  opacity: .65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
}

为了使此功能适用于锚标记，您将必须编写自己的CSS来复制此标记，如果使用SASS来完成类似@extend样式的操作，则更好。