外点击时AngularJS下拉指令隐藏 [英] AngularJS dropdown directive hide when clicking outside

问题描述

我试图创建一个复选框和过滤器选项多选下拉列表。我试图让隐藏着我单击外列表中，但无法弄清楚如何。鸭preciate你的帮助。

I'm trying to create a multiselect dropdown list with checkbox and filter option. I'm trying to get the list hidden with I click outside but could not figure it out how. Appreciate your help.

http://plnkr.co/edit/tw0hLz68O8ueWj7uZ78c

推荐答案

当心，你的解决方案（在Plunker问题中提供）有多个打开第二个弹出（在页面上时，不会关闭其他盒弹出窗口选择）。

Watch out, your solution (the Plunker provided in the question) doesn't close the popups of other boxes when opening a second popup (on a page with multiple selects).

通过点击一个箱子，打开一个新的弹出click事件总是会停止。本次活动将永远达不到其他任何打开的弹出式（可关闭）。

By clicking on a box to open a new popup the click event will always be stopped. The event will never reach any other opened popup (to close them).

我通过删除 event.stopPropagation（）解决了这个。线及配套弹出的所有子元素

I solved this by removing the event.stopPropagation(); line and matching all child elements of the popup.

弹出只会被关闭，如果该事件元素不匹配弹出的任何子元素

The popup will only be closed, if the events element doesn't match any child elements of the popup.

我改变了指令code以下内容：

I changed the directive code to the following:

select.html（指令code）

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：在点击弹出隐藏分区外

截图：

这篇关于外点击时AngularJS下拉指令隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！