一尘不染

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

angularjs

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

这如何运作?


阅读 306

收藏
2020-07-04

共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样式的操作,则更好。

2020-07-04