Почему angular ng-disabled работает с классом boottrap btn?

Ответ 1

ngDisabled работает только для элементов, отвечающих атрибуту disabled (входы, текстовые поля, переключатели, теги кнопок и т.д.). В Bootstrap вам нужно добавить класс "disabled" к вашим элементам btn. Это будет выглядеть так:

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

Чтобы сделать это в angular, определите переменную в вашей директиве/контроллере, например:

$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 click. Для этого вам нужно написать крючок в вашей функции 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 стилей.

Ответ 2

Вот что я сделал. Это бит взлома, но работает

в css

a[data-disabled=true] {
  cursor: not-allowed;
  pointer-events: none;
  opacity: .65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
}

в html

<a data-disabled="{{some boolean expersion}}" href="#2">Test</a>