Question

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

Answer 1

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

不能直接 - 这意味着，您可以将mouseover绑定到包装容器，而不会受到此限制。然后，您需要控制操作，并且只有在需要时禁用标记为true或false时才会继续。

话虽如此，您可能不应该尝试解决此问题。表单UX透视图禁用控件不应该是可交互的，毕竟禁用意味着什么。

Answer 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可以防止任何具有背景颜色的父元素遮盖禁用按钮。

在Angularjs中禁用按钮上的ng-mouseover

2 个答案: