CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Aditya Ponkshe
Aditya Ponkshe

Reputation: 3900

Apply delay on ng-blur

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?

Upvotes: 3

Views: 3798

Answers (4)

laurent
laurent

Reputation: 2620

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);
    });
    }
};
}])

Upvotes: 0

Md Ashaduzzaman
Md Ashaduzzaman

Reputation: 4038

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

Upvotes: 0

Ebrahimi
Ebrahimi

Reputation: 1239

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

Upvotes: 4

Ghyath Serhal
Ghyath Serhal

Reputation: 7632

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;    
}

Upvotes: 1

Related Questions