为什么角的NG-残疾人工作与引导的BTN类？ [英] Why does angular's ng-disabled works with bootstrap's btn class?

问题描述

我有一个锚标记上，NG-禁用指令不会在所有的工作。结果
它的工作原理上的按钮，但只要我在引导的BTN类添加到锚标记，角的NG-禁用开始工作的罚款！

I have an anchor tag on which, ng-disabled directive doesn't work at all.
It works on buttons but as soon as I add the Bootstrap's btn class to the anchor tag, Angular's ng-disabled starts working fine!

这是如何工作？

推荐答案

ngDisabled 只适用于对禁用响应元素属性（输入，文字区域，单选按钮，按钮的标签......等）。在引导，您必须将禁用类添加到您的BTN元素。这将是这样的：

ngDisabled only works for elements that respond to the disabled attribute (inputs, textareas, radio buttons, button tags... etc.). In Bootstrap, you have to add the "disabled" class to your btn elements. That would look like this:

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

要在角度做到这一点，在你的指令/控制器定义一个变量，像这样：

To do this in angular, define a variable in your directive/controller like so:

$scope.disableButtons = true;

然后用角 ngClass 的基础上，像这样的变量动态添加类：

Then use the angular ngClass to dynamically add the class based on the variable like so:

<div class="btn btn-default" ng-class="{'disabled': disableButtons}" ng-click="doSomething()">I'm a button!</div>

每次你改变你的范围内， disableButtons 变量时，该按钮将出现在取决于值视图以禁用或启用。

Every time you change the disableButtons variable within your scope, the button will appear to be disabled or enabled in the view depending on the value.

注意：添加禁用类BTN元素并不prevent JS点击从发生的历史事件。为了做到这一点，你必须写一个钩子在 DoSomething的（）功能，像这样：

NOTE: Adding the disabled class to btn elements does not prevent JS click events from occuring. In order to do this, you have to write a hook in your doSomething() function like so:

$scope.doSomething = function() {
  if($scope.disableButtons) {
    return;
  }
  // Else, really do something
}

编辑：看来我真的不回答这个问题。真正的答案（我相信）是禁用仅适用于 .btn 元素以及链接＆LT; A＆GT;＆LT; A /＆GT; 和列表＆LT;李＆GT;＆LT;李/＆GT; 元素（...和大概几更多），因为这是引导定义它应该工作的。下面是从引导源为 BTN 元素：

It appears I didn't really answer the question. The real answer (I believe) is that disabled only works for .btn elements as well as links <a><a/> and list <li><li/> elements (... and probably a few more) because that's what Bootstrap defines it should work on. Here's the source from Bootstrap for btn elements:

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

To get this working for anchor tags, you're going to have to write your own CSS replicating this, or even better, if you're using SASS to do something like @extend the styles.

这篇关于为什么角的NG-残疾人工作与引导的BTN类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！