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

时间:2014-07-25 13:49:01

标签: javascript angularjs javascript-events

我的搜索字段下面有一个建议框。当我在搜索字段中输入内容时,建议会显示在其下方。当我点击字段外的某个地方时,我希望建议框消失。我希望能够点击建议并进行搜索。

<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-blurng-click未被触发 - 建议框变为隐藏但点击事件不会触发。我试过ng-click="$event.preventDefault(); someFunction()",但它没有用。我试图在hide()方法上设置超时,但它可以工作,但是我必须设置一个大的超时,如200ms,一般来说我认为这是一个糟糕的解决方案。

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

2 个答案:

答案 0 :(得分:1)

我做过的一件事是在我想要点击的项目上提供ng-mousedown和ng-mouseup功能,同时绕过onBlur。我没有找到任何其他方法。在我的情况下,它是一种取消编辑按钮。

  1. 在mousedown上我设置了一个标志“inWhateverMode = true”。 mousedown非常重要,因为它会在模糊之前触发。
  2. 在模糊处理程序中,检查是否inWhateverMode。
  3. 在mouseup上清理任何标志......完成预期的操作。
  4. 当想要允许用户点击按钮,然后将光标从初始按钮移开,然后放开而没有负面影响时,这很方便。就像无意中点击删除按钮一样。

    更新了Plunk:http://plnkr.co/edit/raJzMor9ci8dLgzXuQII?p=preview

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

答案 1 :(得分:0)

好的,我认为这就是你要找的东西:

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

该功能运行,然后下拉消失了吗?

  

$ scope.show = function(item){       $ scope.hidden = true;       警报(项目)     };

修改HTML:

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