javascript – 为什么角度的禁用功能与引导程序的btn类工作?

前端之家收集整理的这篇文章主要介绍了javascript – 为什么角度的禁用功能与引导程序的btn类工作?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个锚标签,ng禁用的指令根本不工作.
它的作用是按钮,但一旦我将Bootstrap的btn类添加到锚标签中,Angular的ng禁用将开始工作!

这是如何工作的?

解决方法

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

编辑:看来我没有真正回答这个问题.真正的答案(我相信),禁用仅适用于.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的样式.

原文链接:https://www.f2er.com/js/151394.html

猜你在找的JavaScript相关文章