外部单击时隐藏AngularJS下拉指令隐藏

Question

我正在尝试使用复选框和过滤器选项创建多选下拉列表。我试图隐藏列表，但我在外面单击却无法弄清楚。感谢你的帮助。

http://plnkr.co/edit/tw0hLz68O8ueWj7uZ78c

Answer 1

请注意，打开第二个弹出窗口（在具有多个选择的页面上）时，您的解决方案（问题中提供的Plunker）不会关闭其他框的弹出窗口。

通过单击一个框打开一个新的弹出窗口，单击事件将始终停止。该事件将永远不会到达任何其他打开的弹出窗口（以将其关闭）。

我通过删除event.stopPropagation();行并匹配弹出窗口的所有子元素来解决此问题。

仅当events元素与弹出窗口的任何子元素都不匹配时，才会关闭弹出窗口。

我将指令代码更改为以下内容：

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：在外部单击时隐藏弹出式div

屏幕截图：