在 ng 模糊上应用延迟

Apply delay on ng-blur

本文关键字：应用 延迟 模糊 ng      更新时间：2023-09-26

我正在使用ng-focus和ng-blur来显示/隐藏按钮。 在输入focus时，会显示一个按钮，blur显示按钮。显示/隐藏正在使用ng-show执行。单击此按钮时，将调用一个函数。

现场演示

问题是，ng-blur我们首先被调用，并且在触发单击事件之前按钮被隐藏，因此从该按钮调用的函数永远不会被调用。

我已经通过使用setTimeout()修复了它，但后来发现它不是一个好的解决方案。还有其他方法可以解决此问题吗？

使用ng-mouseover和ng-mouseleave将按钮更改为

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

演示

为什么

不在按钮的单击事件中更改$scope.show=false;。

换句话说，删除模糊事件，点击事件将是这样的。

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

我认为使用布尔值可以帮助您确定是否需要隐藏或显示按钮的状态。将鼠标悬停在按钮上时，更改布尔值以确定模糊函数的执行。

试试这种方式：

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

js小提琴

使用引入延迟的自定义指令

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