如何在外部单击时关闭Angular-bootstrap popover

Question

当我popover点击弹出窗口外的任何地方时,我试图关闭我的Angular-bootstrap .根据这个问题的答案,现在可以通过利用新popover-is-open属性来实现(在版本0.13.4中):在单击外部时隐藏Angular UI Bootstrap popover

目前我的HTML看起来像这样:

<div
  ng-click="level.openTogglePopover()"
  popover-template="level.changeLevelTemplate"
  popover-trigger="none"
  popover-placement="right"
  popover-is-open="level.togglePopover">
  <button class="btn btn-default btn-xs" type="button">
    <span class="glyphicon glyphicon-sort"></span>
  </button>
</div>

......和我的相关控制器代码:

vm.togglePopover = false;

vm.openTogglePopover = function() {
  vm.togglePopover = !vm.togglePopover;
};

这对于在单击上面引用的按钮时打开/关闭弹出窗口非常有用.我的问题是,当点击弹出窗口外的任何地方时,我如何扩展此功能以关闭弹出窗口？我如何设置事件处理来完成此任务？

Answer 1

由于angular-ui 1.0.0,outsideClick工具提示和弹出窗口有一个新的触发器(在此拉取请求中引入:

<div
  uib-popover-template="level.changeLevelTemplate"
  popover-trigger="outsideClick"
  popover-placement="right">
  <button class="btn btn-default btn-xs" type="button">
    <span class="glyphicon glyphicon-sort"></span>
  </button>
</div>

Answer 2

首先,如果您希望弹出窗口在任何单击时关闭,而不仅仅是弹出窗口外的弹出窗口,您可以使用现有的UI-Bootstrap代码来完成:

<button class="btn btn-default btn-xs" type="button"
        popover-template="level.changeLevelTemplate"
        popover-trigger="focus"
        popover-placement="right">
  <span class="glyphicon glyphicon-sort"></span>
</button>

这里的诀窍是放下周围的东西<div>,然后popover-trigger="focus"右键放在按钮上.

如果您只需要为弹出窗口内容之外的点击关闭popover,那么它将更加困难.你需要一个新的指令,如下所示:

app.directive('clickOutside', function ($parse, $timeout) {
  return {
    link: function (scope, element, attrs) {
      function handler(event) {
        if(!$(event.target).closest(element).length) {
          scope.$apply(function () {
            $parse(attrs.clickOutside)(scope);
          });
        }
      }

      $timeout(function () {
        // Timeout is to prevent the click handler from immediately
        // firing upon opening the popover.
        $(document).on("click", handler);
      });
      scope.$on("$destroy", function () {
        $(document).off("click", handler);
      });
    }
  }
});

然后,在弹出模板中,使用最外层元素上的指令:

<div click-outside="level.closePopover()">
   ... (actual popover content goes here)
</div>

最后,在您的控制器中,实现以下closePopover功能:

vm.closePopover = function () {
  vm.togglePopover = false;
};

我们在这里做的是:

• 我们正在聆听对文档的任何点击,如果点击超出了我们添加close-popover指令的元素:
  • 我们调用任何代码的值 close-popover
• 当指令的范围被破坏时(即弹出窗口关闭时)我们也会自行清理,这样我们就不再处理点击了.

这不是最干净的解决方案,因为你必须从弹出模板中调用控制器方法,但这是我想出的最好的.