Angularjs中禁用按钮上的ng-mouseover答案

【问题标题】：ng-mouseover on disabled button in AngularjsAngularjs中禁用按钮上的ng-mouseover
【发布时间】：2015-06-30 07:38:09
【问题描述】：

我想在按钮被禁用时使用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>

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

这是不可能的。实际上它与Angular无关。当浏览器不应该在禁用的表单控件上触发 onmouseover、onclick 等事件时，这是预期的行为。所以不能直接做。

不能直接 - 意思是，您甚至可以将鼠标悬停绑定到没有此限制的包装容器。然后，如果需要，您需要控制操作并仅在禁用标志为 true 或 false 时继续。

话虽如此，您可能不应该尝试解决此问题。表单 UX 透视禁用控件不应该是可交互的，毕竟这就是 disabled 的意思。

【讨论】：

感谢您的解决方案。我已将鼠标悬停绑定到包装容器。它有效。

【解决方案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-index 防止任何具有背景颜色的父元素遮盖禁用的按钮。

【讨论】：