Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng-mouseover on disabled button in Angularjs

I want to use mouseover when the button is disabled. In the below code mouseover will work if ng-disabled="false" but it won't work if 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>
like image 648
Akash Rao Avatar asked Jun 30 '15 07:06

Akash Rao


1 Answers

It's not possbile. Actually it has nothing to do with Angular. It's expected behaviour when browsers are not supposed to fire onmouseover, onclick, etc. events on disabled form controls. So you can't do it directly.

Can't do it directly - meaning, that you can bind mouseover even to wrapping container which would not have this limitation. Then you would need to control action and proceed only if disabled flag is true or false if you need.

That being said, you should probably not try to workaround this behaviour. Form UX perspective disabled control should not be interaction-able, after all that's what disabled means.

like image 94
dfsq Avatar answered Sep 23 '22 17:09

dfsq