javascript - AngularJS - 模糊延迟

Question

我有以下内容:

<div class="staff">

    <input ng-model="user" 
            ng-focus="isFocused = true;"
            ng-blur="isFocused = false;/>

    <div class="matches" ng-if="isFocused">
        <div class="user" 
            ng-repeat="match in users | filter:user" 
            ng-bind="match"
            ng-click="user = match">
        </div>
    </div>

</div> 

根据我的指令 .staff 。基本上，我们有一个输入字段。当您开始输入时，它会显示匹配项。然后我想单击一个匹配项，它应该更新 ng-model='user' 。

现在这不起作用，因为 ng-focus快速隐藏.matches (也就是说，当您想单击 .match 时，您已经模糊了输入，因此 isFocused 变为 false )。

我目前的解决方案是依赖指令 element.bind()对于对焦和模糊，基本上都是延迟 Action 。

因此，在我当前的实现中，input标签很简单 <input ng-model="user"/>我的指令是 link是

link: function(scope, element, attrs)
{
    element.bind('focus', function()
    {
        scope.isFocused = true;
    });

    element.bind('blur', function()
    {
        $timeout(function() 
        {
            scope.isFocused = false;
        }, 125);
    });
}

我真的更喜欢第一个选项。有什么我可以做的吗？

Answer 1

<div class="staff">
    <input ng-model="user" 
            ng-focus="isFocused = true;"
            ng-blur="focusOut()"/>

    <div class="matches" ng-if="isFocused">
        <div class="user" 
            ng-repeat="match in users | filter:user" 
            ng-bind="match"
            ng-click="user = match">
        </div>
    </div>
</div> 

link: function(scope, element, attrs){
    scope.focusOut = function(){
        $timeout(function(){
            scope.isFocused = false;
        }, 125);
    });
}