在ng-blur上應用延遲

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>

演示

Answer 2

你為什么不改變$scope.show=false; 在按鈕的單擊事件中。

換句話說，刪除模糊事件，click事件將是這樣的。

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