当点击外面时,AngularJS下拉指令隐藏
发布时间:2020-12-17 08:50:34 所属栏目:安全 来源:网络整理
导读:我试图创建一个多选择下拉列表与复选框和过滤器选项。我试图得到列表隐藏与我点击外面,但不能弄明白如何。感谢你的帮助。 http://plnkr.co/edit/tw0hLz68O8ueWj7uZ78c 注意,您的解决方案(问题中提供的Plunker)在打开第二个弹出窗口(在具有多个选择的页面上
我试图创建一个多选择下拉列表与复选框和过滤器选项。我试图得到列表隐藏与我点击外面,但不能弄明白如何。感谢你的帮助。
http://plnkr.co/edit/tw0hLz68O8ueWj7uZ78c
注意,您的解决方案(问题中提供的Plunker)在打开第二个弹出窗口(在具有多个选择的页面上)时不会关闭其他框的弹出窗口。
通过单击框打开一个新的弹出窗口,点击事件将始终停止。该事件永远不会到达任何其他打开的弹出窗口(关闭它们)。 我解决了这个通过删除event.stopPropagation();线并匹配弹出窗口的所有子元素。 仅当事件元素与弹出窗口的任何子元素不匹配时,弹出窗口才会关闭。 我将指令代码更改为以下内容: select.html(指令代码) link: function(scope,element,attr){ scope.isPopupVisible = false; scope.toggleSelect = function(){ scope.isPopupVisible = !scope.isPopupVisible; } $(document).bind('click',function(event){ var isClickedElementChildOfPopup = element .find(event.target) .length > 0; if (isClickedElementChildOfPopup) return; scope.$apply(function(){ scope.isPopupVisible = false; }); }); } 我分叉你的plunker并应用的更改: Plunker: Hide popup div on click outside 屏幕截图: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |