Apply delay on ng-blur

Question

I am using ng-focus and ng-blur to show/hide a button. on focus of an input, a button is shown and on blur it is hidden. Show/hide is being performed using ng-show. On click of this button a function gets called.

Live Demo

Issue is that ng-blur us being called first and the button is getting hidden before the click event is fired, hence function which is to be called from that button is never getting called.

I have already fixed it by using setTimeout() but later found that it is not really a good solution. Is there any other way to fix this issue?

Answer 1

use ng-mouseover and ng-mouseleave change your button to

        <button ng-click="click()" ng-show="show||mouseover" ng-mouseover="mouseover=true" ng-mouseleave="mouseover=false">Click to change</button>

demo