隐藏UI角度引导酥料饼点击它时，外 [英] Hide Angular UI Bootstrap popover when clicking outside of it

问题描述

我想手动关闭一个引导酥料饼得到它关闭，当我点击文件或体就是不酥料饼。

I am trying to manually close a bootstrap popover to get it to close when I click anywhere on the document or body that isn't the popover.

我已经找到了实现这一最接近的事是创建一个指令（发现这个答案），但是这是手动触发变量是否的真正的或的假的

The closest thing I have found to accomplishing this is to create a directive (found this answer) but this is for a manual trigger if a variable is true or false.

谁能帮我弄清楚如何得到它关闭，如果我点击任何东西就是不酥料饼？

Could anyone help me figure out how to to get it to close if I click on anything that isn't the popover?

我不介意使用jQuery $（文件）。点击（函数（五）{}）; 我只是不知道如何调用一个亲密<。 / p>

I don't mind using jQuery $(document).click(function(e){}); I just have no clue how to call a close.

<div id="new_button" popover-template="plusButtonURL" popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>

---

通常酥料饼触发=焦点会做的伎俩，但我酥料饼包含需要点击上的内容。我有一个我酥料饼里面的那个得到的忽视NG-点击如果我使用的焦点的触发，所以我找一个不那么传统的方式要解决这个问题。

---

Normally popover-trigger="focus" would do the trick, however my popover contains content that needs to be clicked on. I have an ng-click inside my popover that get's ignored if I use the focus trigger so I am looking for a not-so-conventional way to get around that.

推荐答案

编辑：

1. 创建一个自定义的指令，让您瞄准的触发因素。


2. 创建被添加到主体和将会找到触发元件和被点击时触发定义事件的自定义指令。

您需要从打开酥料饼（在演示，这是按钮）元素触发自定义事件处理程序。我们面临的挑战是，酥料饼被追加为同级这个元素，我一直认为，事情有更大的潜力，打破当你遍历DOM，并期待它有一个特定的结构。有几种方法可以针对触发因素，但我的做​​法是一个独特的类名添加到元素（我选择触发），当你点击它。只有一个酥料饼可以在这种情况下一次打开，所以它的安全使用类名，但可以修改以满足您的preference。

Create a custom directive to target the trigger element:

You need to trigger the custom event handler from the element that opened the popover (in the demo this is the button). The challenge is that the popover is appended as a sibling to this element and I always think that things have greater potential to break when you are traversing the DOM and expecting it to have a specific structure. There are several ways you can target the trigger element, but my approach is to add a unique classname to the element (I choose 'trigger') when you click on it. Only one popover can be opened at a time in this scenario, so it's safe to use a classname, but you can modify to suit your preference.

的自定义指令的

app.directive('popoverElem', function(){
  return{
    link: function(scope, element, attrs) {
      element.on('click', function(){
        element.addClass('trigger');
      });
    }
  }
});

的应用于按钮的

<button popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" class="btn btn-default" popover-elem>Popover With Template</button>

创建的文档主体的自定义指令（或任何其它元件），以靠近触发酥料饼：

最后一块是创建一个自定义的指令，将定位触发因素和火灾自定义事件时，该元素将它应用到点击关闭酥料饼。当然，你必须从触发元素排除最初的单击事件，并希望与你酥料饼的内部交互的任何元素。因此，我添加了名为排除类，所以你可以定义一个类，您可以添加到它的点击事件应该被忽略的元素属性（不引起酥料饼关闭）。

Create a custom directive for the document body (or any other element) to trigger the popover close:

The last piece is to create a custom directive that will locate the triggering element and fire the custom event to close the popover when the element it is applied to is clicked. Of course, you have to exclude the initial click event from the 'trigger' element, and any elements you want to interact with on the inside of your popover. Therefore, I added an attribute called exclude-class so you can define a class that you can add to elements whose click events should be ignored (not causing the popover to close).

要清理的东西了，当触发事件处理程序，我们会删除已添加到触发因素触发类。

To clean things up, when the event handler is triggered, we remove the trigger class that was added to the trigger element.

app.directive('popoverClose', function($timeout){
  return{
    scope: {
      excludeClass: '@'
    },
    link: function(scope, element, attrs) {
      var trigger = document.getElementsByClassName('trigger');

      function closeTrigger(i) {
        $timeout(function(){ 
          angular.element(trigger[0]).triggerHandler('click').removeClass('trigger'); 
        });
      }

      element.on('click', function(event){
        var etarget = angular.element(event.target);
        var tlength = trigger.length;
        if(!etarget.hasClass('trigger') && !etarget.hasClass(scope.excludeClass)) {
          for(var i=0; i<tlength; i++) {
            closeTrigger(i)
          }
        }
      });
    }
  };
});

我添加了这个身体标记，这样整个页面*充当用于酥料饼一个可取消背景：

I added this to the body tag so that the entire page* acts as a dismissible backdrop for the popover:

<body popover-close exclude-class="exclude">

和，我增加了排除类的酥料饼输入：

And, I added the exclude class to the input in the popover:

<input type="text" ng-model="dynamicPopover.title" class="form-control exclude">

所以，有一些调整和陷阱，但我会留给你：

So, there are some tweaks and gotchas, but I'll leave that to you:

1. 您应该设置一个默认排除在酥料饼闭指令链接功能类，万一有没有定义。


2. 您需要注意的是，酥料饼闭指令元素的约束，因此，如果您删除我的HTML和body元素设置的样式给他们100％的高度，你可以有你的视口，如果在死区您的内容不填充。

在Chrome，Firefox和Safari的测试。

Tested in Chrome, Firefox and Safari.

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