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?

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?

• javascript
• angularjs
• angularjs-directive

• What about this jsfiddle/m8ab96su/3 – dfsq Commented Nov 19, 2014 at 6:21
• What about removing the button pletely and add the logic on the blur event. – Ghyath Serhal Commented Nov 19, 2014 at 6:38
• @dfsq as i said, i can;t really remove ng-blur. – Aditya Ponkshe Commented Nov 19, 2014 at 6:42

4 Answers 4

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

why don't you change the $scope.show=false; in the click event of the button.

In other words, remove the blur event, and the click event will be like this.

 $scope.click = function(){
    alert("fuu")
    $scope.text = "We changed it";
    $scope.show=false;    
}

I think using a bool can help you to determine the state if it's needed to hide or show the button. On mouseover of the button change the bool to determine the execution of blur function.

Try this ways :

HTML :

<div ng-app ng-controller="LoginController">
    <div>{{ text }}</div>
    <input ng-focus="focus()" ng-blur="blur()"></input>
    <button ng-click="click()" ng-show="show==true" ng-mouseover="mouseover()">Click to change</button>
</div>

angularjs :

function LoginController($scope) {
    $scope.show=false;
    $scope.blurAll = true;
    $scope.text = "this thing will change on click";

    $scope.focus = function(){
        console.log("buu");
        $scope.show=true;
    }
    $scope.blur = function(){
        if(blurAll){
            console.log("baaa");
            $scope.show=false;
        }
    }

    $scope.click = function(){
            alert("fuu");
            $scope.text = "We changed it";
            $scope.show = false;

    }

    $scope.mouseover = function(){
        blurAll = false;
    };
}

jsFiddle

use a custom directive which introduce a delay

app.directive('ngBlurDelay',['$timeout',function($timeout){
return {
    scope:{
        ngBlurDelay:'&'
    },
    link:function(scope, element, attr){
    element.bind('blur',function(){
       $timeout(scope.ngBlurDelay,200);
    });
    }
};
}])