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

请注意，打开第二个弹出窗口（在具有多个选择的页面上）时，您的解决方案（问题中提供的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

屏幕截图：