如何点击时，外关角引导酥料饼 [英] How to close Angular-bootstrap popover when clicking outside

问题描述

我试图关闭我的角度，引导酥料饼点击popovers以外的任何地方当s。根据通过利用新的回答这个问题，这个现在可以完成（在0.13.4版）酥料饼，是开放属性：<一个href=\"http://stackoverflow.com/questions/30512748/hide-angular-ui-bootstrap-popover-when-clicking-outside-of-it\">Hide角UI引导酥料饼点击它外面时

I am attempting to close my Angular-bootstrap popovers when clicking anywhere outside the popovers. According to an answer to this question this can now be accomplished (in version 0.13.4) by utilizing the new popover-is-open attribute: Hide Angular UI Bootstrap popover when clicking outside of it

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

Currently my HTML looks like so:

<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>

...我的相关负责人code：

...and my relevant controller code:

vm.togglePopover = false;

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

这对于开放的伟大工程/在上面提到的按钮，点击时关闭酥料饼。我的问题是，我将如何扩展该功能酥料饼以外的任何位置，当点击关闭酥料饼？我将如何设置我的事件处理做到这一点？

This works great for opening/closing the popover when clicking on the button referenced above. My question is, how would I extend this functionality to close the popover when clicking anywhere outside of the popover? How would I set up my event handling to accomplish this?

推荐答案

首先，如果你想酥料饼关闭在任何点击，不仅是一组在外面你酥料饼，你可以不要用它现有的用户界面，引导code：

First of all, if you want the popover to close on any click, not only the one outside of your popover, you can do it using existing UI-Bootstrap code:

<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>

这里的窍门是砸周围的＆LT; D​​IV＆GT; ，把酥料饼触发=焦点右侧的按钮。

如果您需要实际关闭酥料饼只有点击的酥料饼以外的内容，那么这将是更加困难。你需要一个新的指令，像这样的：

If you need to actually close the popover only for clicks outside the popover content, then it will be more difficult. You need a new directive, like this one:

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);
      });
    }
  }
});

然后，在你的酥料饼的模板，使用最外层的元素的指令：

Then, in your popover template, use the directive on the outermost element:

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

最后，在你的控制器，实现了 closePopover 功能：

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

我们在这里所做的是：

What we've done here is:

• 我们正在收听关于该文件的任何点击，并且，如果点击是，这是我们增加了我们的特写酥料饼指令元素之外：
  
  
  • 我们调用任何code是价值特写酥料饼
  
  
  • we're listening on any clicks on the document, and, if the click is outside of the element to which we added our close-popover directive:
    • we invoke whatever code was the value of close-popover

    这不是干净的解决方案，因为你必须从酥料饼模板中调用控制器的方法，但它是我想出了最好的。

    It's not the cleanest solution, as you have to invoke the controller method from within the popover template, but it's the best I came up with.

    这篇关于如何点击时，外关角引导酥料饼的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！