为什么 Angular 的 ng-disabled 与 bootstrap btn 类一起工作？答案

【问题标题】：Why does angular's ng-disabled works with bootstrap's btn class?为什么 Angular 的 ng-disabled 与 bootstrap btn 类一起工作？
【发布时间】：2014-05-01 13:28:10
【问题描述】：

我有一个锚标记，ng-disabled 指令在该标记上根本不起作用。
它适用于按钮，但只要我将 Bootstrap 的 btn 类添加到锚标记，Angular 的 ng-disabled 就会开始正常工作！

这是如何工作的？

【问题讨论】：

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

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

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

要在 Angular 中执行此操作，请在指令/控制器中定义一个变量，如下所示：

$scope.disableButtons = true;

然后使用角度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 样式的事情。

【讨论】：

我认为 OP 在添加 btn 类后询问为什么它正在工作。不是如何解决它。
所以 ng-disabled 只是添加了禁用类？
ngDisabled 添加了 disabled 属性...它看起来也像 Bootstrap 从我提供的源中获取的，我不知道。这可以解释为什么当您添加 ng-disabled 属性时您的锚标记会被禁用

【解决方案2】：

这就是我所做的。这有点小技巧，但有效

在css中

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

在html中

<a data-disabled="{{some boolean expersion}}" href="#2">Test</a>

【讨论】：

查看接受的答案。它正确地回答了这个问题，并帮助人们理解该做什么。您在此处添加了哪些骇人听闻的答案？