我在其下方有一个带有建议框的搜索字段。当我在搜索字段中键入内容时,建议将显示在其下方。当我单击字段外的某个位置时,我希望建议框消失。我希望能够单击建议并执行搜索。
<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>
问题在于,由于
ng-blur
的缘故,ng-click
不会被触发-建议框被隐藏,但click事件不会触发。我尝试了ng-click="$event.preventDefault(); someFunction()"
,但是它不起作用。我尝试在hide()
方法上设置超时,它可以工作,但是我必须设置一个200ms的大超时,通常我认为这是一个不好的解决方案。编辑:
http://plnkr.co/edit/9BR7Sv2502S87HO56Ofp?p=preview
最佳答案
我要做的一件事是在我想绕开onBlur时要单击的项目上提供ng-mousedown和ng-mouseup函数。我没有找到其他解决方法。就我而言,这是一种取消编辑按钮。
在mousedown上,我设置了一个标志“ inWhateverMode = true”。鼠标按下很重要,因为它会在模糊之前触发。
在模糊处理程序中,检查是否处于inWhateverMode。
在mouseup上,您清除所有标志...完成预期的操作。
当希望允许用户单击按钮,然后将光标从初始按钮移开,然后放开而不会产生负面影响时,这非常方便。就像无意间单击了删除按钮一样。
更新的Plunk:http://plnkr.co/edit/raJzMor9ci8dLgzXuQII?p=preview
ng-mousedown='startToShowItem(item)' ng-mouseup='show(item)'