如何防止 angular-bootstrap 下拉菜单关闭（解除绑定事件，由指令绑定）

Question

我正在使用 Angular-Bootstrap 下拉菜单。我想阻止它在点击时关闭，直到用户故意关闭它。

默认状态是：单击文档中的某处时下拉菜单关闭。

我确定了相关的代码行：（第 12 行，dropdown.js）

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

你可以在这里找到完整的代码：Link to Github

我不想更改 angular-bootstrap 的原始来源以保持我的项目开放以供更新。

我的问题：

如何将指令绑定的事件与 Angular 控制器中的文档解除绑定？

Answer 1

我通过将以下内容添加到下拉菜单中解决了这个问题。这可以防止下拉菜单关闭，除非您单击打开它的标签

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

Answer 2

对于使用 Angular UI-Bootstrap 0.13.0 或更高版本的用户，这里是 UI-Bootstrap 文档中所述的更简洁的方式。

默认情况下，如果单击其中的任何元素，下拉菜单将自动关闭，您可以通过设置自动关闭选项来更改此行为，如下所示：

• always - （默认） 元素被点击。

• outsideClick - 仅当用户 点击下拉菜单之外的任何元素。

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

这里是文档的链接： https://angular-ui.github.io/bootstrap/#/dropdown

Answer 3

您可以通过添加事件传播来阻止事件在 Angular 2 及以上的 DOM 树中冒泡。 例如：(click)="$event.stopPropagation()"

Answer 4

这是另一个技巧，但您可以添加一个指令来阻止切换事件传播。例如，这样的事情适用于我的特定用例：

<div>
<div class="btn-group" dropdown is-open="status.isopen" ng-controller="DropDownCtrl">
  <button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
    Button dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li ng-click="goToPage('Action')">Action</li>
    <li disable-auto-close>Don't Dismiss</li>
    <li ng-click="goToPage('SomethingElse')">Something else here</li>
  </ul>
</div>

将此指令添加到元素应禁用自动关闭行为：

angular.module('plunker', ['ui.bootstrap'])
.controller('DropDownCtrl', ['$scope', '$location',
function($scope, $location) {
  // Controller logic here
  $scope.goToPage = function(page) {
    console.log("Going to " + page + ". Dropdown should close");
    $location.path(page);
  };
}])
.directive('disableAutoClose', function() {
  // directive for disabling the default
  // close on 'click' behavior
  return {
        link: function($scope, $element) {
            $element.on('click', function($event) {
                console.log("Dropdown should not close");
                $event.stopPropagation();
            });
        }
    };
});

Plunker Example Here