Question

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

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

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

Answer 1

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

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

demo

Answer 2

为什么不在按钮的点击事件中更改$scope.show=false;。

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

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

Answer 3

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

尝试以下方式：

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

Answer 4

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

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

在ng-blur上应用延迟

4 个答案: