Here is the code snippet I am working with:
<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>
The directive is set on .staff. It contains an input field that displays matches while typing. The goal is to click a match and have it update the ng-model='user'.
Currently, this functionality does not work as intended. When focusing on the input, the matches quickly disappear, causing .matches to become hidden. This happens because once clicking on a match, the focus is lost on the input, setting isFocused to false.
To address this issue, my current solution involves using element.bind() within the directive to handle focus and blur events with a slight delay.
In my existing implementation, the input tag remains simple: <input ng-model="user"/>, and the link function of my directive looks like this:
link: function(scope, element, attrs)
{
element.bind('focus', function()
{
scope.isFocused = true;
});
element.bind('blur', function()
{
$timeout(function()
{
scope.isFocused = false;
}, 125);
});
}
Although this workaround functions properly, I would prefer to explore alternatives. Is there a better approach I can take?