如何防止关闭角度引导下拉(Unbind事件受到指令的约束)

Question

我正在使用Angular-Bootstrap Dropdown.我想阻止它关闭点击,直到用户故意关闭它.

默认状态为:单击文档中的某个位置时,Dropdown关闭.

我确定了相关的代码行:(第12行,dropdown.js)

this.open = function( dropdownScope ) {
   if ( !openScope ) {
     $document.bind('click', closeDropdown); // line to unbind
     $document.bind('keydown', escapeKeyBind);
   }
}

你可以在这里找到完整的代码:链接到Github

我不想更改angular-bootstrap的原始来源以保持我的项目更新.

我的问题:

如何将指令绑定的事件解除绑定到角度控制器中的文档？

Answer 1

我通过在下拉菜单中添加以下内容来解决这个问题.这可以防止关闭下拉,除非您单击打开它的标记

<ul class="dropdown-menu" ng-click="$event.stopPropagation()">

Answer 2

对于那些使用Angular UI-Bootstrap 0.13.0或更高版本的用户,这里是UI-Bootstrap文档中更清晰的说明方式.

默认情况下,如果单击任何元素,下拉列表将自动关闭,您可以通过设置auto-close选项来更改此行为,如下所示:

• always - (默认)在单击任何元素时自动关闭下拉列表.

• outsideClick - 仅当用户单击下拉列表外的任何元素时自动关闭下拉列表.

• 禁用 - 禁用自动关闭.然后,您可以使用is-open手动控制下拉列表的打开/关闭状态.请注意,如果单击切换按钮,按下esc键或打开另一个下拉列表,下拉列表仍将关闭.下拉列表将不再关闭$ locationChangeSuccess事件.

以下是文档的链接:https: //angular-ui.github.io/bootstrap/#/dropdown

Answer 3

这是一种覆盖它的粗略方法。您需要手动控制 is-open 属性并劫持 on-toggle 事件，例如：

<div class="btn-group" dropdown is-open="ctrl.isOpen" on-toggle="toggled(open)">
    <button type="button" class="btn btn-primary dropdown-toggle">
        Button dropdown <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

控制器：

    $scope.toggled = function (open) {
        $timeout(function () {
            $scope.ctrl.isOpen = true;
        });
    };

我会要求 dropdownConfig 常量的属性（例如 autoClose）作为永久解决方案。