忽略某些元素的ng-blur事件

Question

I have a search field with suggestion box below it. When I type in the search field, the suggestions appear below it. When I click somewhere outside the field, I want the suggestion box to disappear. And I want to be able to click on a suggestion and perform a search.

<input ng-blur="suggestionBox.hide()" ng-model='someModel' />

<div class='suggestion-box'>
<ul>
<li ng-repeat="suggestion in suggestions" ng-click="someFunction()">suggestion.name</li>
</ul>
</div>

The problem is that because of the ng-blur , the ng-click is not triggered - the suggestion box becomes hidden but the click event doesn't trigger. I tried ng-click="$event.preventDefault(); someFunction()" but it doesn't work. I tried to set timeout on the hide() method, and it works but I have to set a big timeout like 200ms and generally I think that is a bad solution.

edit: http://plnkr.co/edit/9BR7Sv2502S87HO56Ofp?p=preview

Answer 1

One thing I've done is provided ng-mousedown and ng-mouseup functions on items i want to click on while circumventing the onBlur. I haven't found any other way around it. In my case it was a sort of a cancel edit button.

1. On mousedown i set a flag "inWhateverMode = true". The mousedown is important because it fires before the blur.
2. In the blur handler, check to see if inWhateverMode.
3. On mouseup you cleanup any flags...complete the intended action.

This is handy when wanting to allow the user to click on a button, then move the cursor off the initial button, and then let go without negative impacts. Like inadvertently clicking a delete button.

Updated Plunk: http://plnkr.co/edit/raJzMor9ci8dLgzXuQII?p=preview

ng-mousedown='startToShowItem(item)' ng-mouseup='show(item)'

Answer 2

Ok so I think this is what you're looking for:

http://plnkr.co/edit/r3SlOXg6VuTZDABPCAxq?p=preview

The function runs, and then the drop down disappears?

$scope.show = function(item) { $scope.hidden = true; alert(item) };

modified HTML:

<input ng-model='search' />
<div ng-hide='hidden' style='border:1px solid black'>