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()进行焦点和模糊，并基本上延迟了操作。

因此，在我目前的实施中，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);
    });
}

AngularJS - 模糊延迟

1 个答案: