为什么angular的ng-disabled适用于bootstrap的btn类？

Question

我有一个锚标记,ng-disabled指令根本不起作用.
它适用于按钮,但只要我将Bootstrap的btn类添加到锚标签,Angular的ng-disabled就能正常工作!

这是怎么回事？

Answer 1

ngDisabled仅适用于响应disabled属性的元素(输入,textareas,单选按钮,按钮标签等).在Bootstrap中,您必须将"禁用"类添加到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的样式.