Ng-mouseover на отключенной кнопке в Angularjs

Я хочу использовать mouseover, когда кнопка отключена. В приведенном ниже коде mouseover будет работать, если ng-disabled="false", но он не будет работать, если ng-disabled="true".

<body ng-app="ngAnimate">
  <button ng-disabled="true" ng-mouseover="show=true" ng-mouseleave="show = false">
    Mouseover
  </button>
  <div>
  Show:
    <span class="test" ng-show="show">
      I show up when your mouse enter on button
    </span>
  </div>

</body>

Ответы

Ответ 1

Это не возможно. На самом деле это не имеет никакого отношения к Angular. Он ожидал поведения, когда браузеры не должны запускать onmouseover, onclick и т.д. События на отключенных элементах управления формой. Поэтому вы не можете сделать это напрямую.

Невозможно сделать это напрямую - это означает, что вы можете связать mouseover даже с контейнером, который не будет иметь этого ограничения. Затем вам нужно будет управлять действием и действовать, только если отключен флаг true или false, если вам нужно.

При этом вы, вероятно, не должны пытаться обходить это поведение. Функция контроля UX перспективы должна быть не способна к взаимодействию, ведь все, что отключено, означает.

Ответ 2

Недавно я столкнулся с аналогичной проблемой, когда я отключил кнопку отправки в форме, если форма не действительна. Когда пользователь наводил курсор на отключенную кнопку, я хотел, чтобы все требуемые поля получили другой цвет.

Я решил это с помощью такой структуры html:

<div ng-class="{error: showError}">
    <div disabled-wrapper ng-mouseenter="checkValid()" ng-mouseleave="showError = false">
        <div><button ng-disabled="!valid">Next</button></div>
    </div>
</div>

И css вот так:

[disabled-wrapper] {
    position: relative;
    z-index: 0;
}
[disabled-wrapper] [disabled] {
    position: relative;
    z-index: -1;
}

И функция контроллера:

$scope.checkValid = function() {
    $scope.showError = !$scope.valid;
}

//У меня больше логики относительно действительности формы.

//Я не уверен, зачем нужен div внутри оболочки (но это так).

//Позиционирование и z-индекс оболочки не позволяют любому родительскому элементу с фоновой подсветкой отбрасывать отключенную кнопку.