Javascript 使用Bootstrap 3和AngularJS的多选下拉菜单？

我正在尝试使用Bootstrap3.0.2和AngularJS1.2创建一个多选下拉列表。我可以打开下拉框，然后开始工作。然而，不起作用的是，当我点击菜单外的任何地方时，它都不会关闭。到目前为止，我将“Filter Selections”按钮视为打开和关闭下拉框的开关，这对用户来说不是很友好

当我在菜单外单击时，如何使下拉框关闭

这就是我到目前为止所做的：

<div class="btn-group" data-ng-class="{open: openDropDown}">
    <button class="btn btn-default" type="button" data-ng-click="openDropDown=!openDropDown">Filter Selections<span class="caret"></span></button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
        <li><a href="">Item #1<span class="glyphicon glyphicon-ok-sign pull-right"></span></a></li>
        <li><a href="">Item #2<span class="glyphicon glyphicon-ok-sign pull-right"></span></a></li>
        <li><a href="">Item #3<span class="glyphicon glyphicon-ok-sign pull-right"></span></a></li>
        <li><a href="">Check All</a></li>
        <li><a href="">Uncheck All</a></li>
    </ul>
</div>

筛选选择

我知道我需要以某种方式结合bootstrap的代码：“.dropdown background”在菜单外单击时关闭下拉菜单

---

Bootstrap 3下拉菜单用法：

用您当前拥有的解决方案修复它的一个方法是添加一个自定义指令来处理它

因此，在“btn group”div元素中添加一个directive属性，document switch off=“openDropDown” 并将以下指令添加到应用程序

<div class="btn-group" data-ng-class="{open: openDropDown}" document-switch-off="openDropDown">
<button class="btn btn-default" type="button" data-ng-click="openDropDown=!openDropDown">Filter Selections<span class="caret"></span></button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu">
    <li><a href="">Item #1<span class="glyphicon glyphicon-ok-sign pull-right"></span></a></li>
    <li><a href="">Item #2<span class="glyphicon glyphicon-ok-sign pull-right"></span></a></li>
    <li><a href="">Item #3<span class="glyphicon glyphicon-ok-sign pull-right"></span></a></li>
    <li><a href="">Check All</a></li>
    <li><a href="">Uncheck All</a></li>
</ul>
</div>

我有一个与fiddle示例的链接，可以创建一个具有您喜欢的功能的自定义下拉列表，我会寻找它

---

找不到原始plunk，但这里有一个快速示例：

我实际上已将原始文件保存为模板。我没有创建它，但如果您需要引用它，可能会有所帮助。非常感谢你！我只是简单地插入了你的指令，一切都很完美。这正是我所需要的！再次感谢！！！你好@AraHacobian你的解决方案很有效。但是如果我有多个下拉列表呢？在这种情况下，单击其中任何一个都会触发所有下拉列表。看这里-

angular.module('app')
.directive('documentSwitchOff', [
'$parse',
'$timeout',
function ($parse,$timeout) {
    return function (scope, element, attrs) {
        var getter = $parse(attrs.documentSwitchOff);
        var setter = getter.assign;
        var clickInsideElement = false;
        function elementClickHandler(){
            clickInsideElement = true;
        }
        function documentClickHandler(){
            if(!clickInsideElement){
                scope.$apply(function(){
                    setter(scope,false);
                });
            }
            clickInsideElement = false;
        }
        var bound = false;
        scope.$watch(attrs.documentSwitchOff,function(newVal){
            if(angular.isDefined(newVal)){
                if(newVal){
                    $timeout(function(){
                        bound = true;
                        element.bind("click",elementClickHandler);
                        var doc = angular.element(document)
                            doc.bind('click',documentClickHandler);
                    },0);
                }
                else{
                    if(bound){
                        element.unbind("click",elementClickHandler);
                        angular.element(document).unbind('click',documentClickHandler);
                        bound = false;
                    }

                }
            }
        });

        scope.$on("$destroy",function(){
            if(bound){
                element.unbind("click",elementClickHandler);
                angular.element(document).unbind('click',documentClickHandler);
                bound = false;
            }
        });
    }
}
]);