Clever Geek Handbook

Apply delay on ng-blur

I am using ng-focus

and ng-blur

to show / hide a button. on focus

input, the button is displayed, and on blur

it is hidden. Show / hide is done with ng-show

. When this button is pressed, the function is called.

Live Demo

The problem is that ng-blur

we are called first and the button is hidden before the click event is triggered, so the function that should be called from that button will never be called.

I have already fixed it using setTimeout()

, but later found it was not a very good solution. Is there any other way to fix this problem?

+3


source to share


4 answers


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

+4


source


why don't you change $scope.show=false;

in the button click event.

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


source


I think using bool can help you define the state if it needs to hide or show the button. By hovering over the bool button, you can determine whether the blur function is performed.

Try the following methods:

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

0


source


use a custom directive that introduces a delay

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


source






More articles:


All Articles