我有一个锚标记,ng-disabled指令根本不起作用。 它可以在按钮上工作,但是一旦我将Bootstrap的btn类添加到锚标记中,Angular的ng-disabled就可以正常工作了!
这如何运作?
ngDisabled仅适用于响应该disabled属性的元素(输入,文本区域,单选按钮,按钮标签等)。在Bootstrap中,您必须将“ disabled”类添加到btn元素中。看起来像这样:
ngDisabled
disabled
<div class="btn btn-default disabled">I'm a button!</div>
为此,请在指令/控制器中定义一个变量,如下所示:
$scope.disableButtons = true;
然后使用angular ngClass来基于变量动态添加类,如下所示:
ngClass
<div class="btn btn-default" ng-class="{'disabled': disableButtons}" ng-click="doSomething()">I'm a button!</div>
每次disableButtons在范围内更改变量时,该按钮将在视图中根据值显示为禁用或启用。
disableButtons
注意: 将禁用的类添加到btn元素不会阻止JS单击事件的发生。为此,您必须在doSomething()函数中编写一个钩子,如下所示:
doSomething()
$scope.doSomething = function() { if($scope.disableButtons) { return; } // Else, really do something }
编辑: 看来我并没有真正回答这个问题。真正的答案(我相信)是disabled仅适用于.btn元素以及链接<a><a/>和列表<li><li/>元素(…,可能还有更多),因为这是Bootstrap定义的。这是来自Bootstrap的btn元素来源:
.btn
<a><a/>
<li><li/>
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样式的操作,则更好。
@extend