Question

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

这是如何工作的？

Answer 1

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

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

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

$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定义它应该工作的东西。以下是btn元素的Bootstrap源代码：

.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样式的事情。

Answer 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;
}

in html

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

为什么angular＆amp; ng-disabled与bootstrap的btn类一起使用？

2 个答案: