点击外部时，隐藏Angular UI Bootstrappopup窗口
我试图手动closures一个引导popup窗口让它closures，当我点击document或body不是popup窗口的任何地方。
我发现完成这个最接近的事情是创build一个指令（ find这个答案 ），但这是一个手动触发，如果一个variables是true或false 。
任何人都可以帮我弄清楚如何点击不是popup窗口的东西？
我不介意使用jQuery $(document).click(function(e){}); 我只是不知道如何打电话结束。
<div id="new_button" popover-template="plusButtonURL" popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>
通常情况下， popover-trigger="focus"可以做到这一点，但是我的popover包含需要点击的内容。 如果我使用焦点触发器，我的popup窗口中会有一个ng-click ，所以我正在寻找一种不太常规的方法来解决这个问题。
编辑：
Plunker演示
以下是它的工作原理（仍然漫长而详尽的解释）：
- 创build一个自定义指令，允许您定位触发器元素。
- 创build添加到主体的自定义指令，并find触发器元素，并在单击时触发自定义事件。
创build一个自定义指令来定位触发器元素：
您需要从打开popover的元素（在演示中，这是button）触发自定义事件处理程序。 我们面临的挑战是popover作为这个元素的兄弟，我总是认为当你遍历DOM并期望它有一个特定的结构时，事情会有更大的潜力。 有几种方法可以定位触发器元素，但是我的方法是在单击元素时添加一个唯一的类名（我select“触发器”）。 在这种情况下，一次只能打开一个popup窗口，所以使用类名是安全的，但是可以根据自己的喜好进行修改。
自定义指令
app.directive('popoverElem', function(){ return{ link: function(scope, element, attrs) { element.on('click', function(){ element.addClass('trigger'); }); } } });
应用于button
<button popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" class="btn btn-default" popover-elem>Popover With Template</button>
为文档正文（或任何其他元素）创build自定义指令来触发popup式closures：
最后一部分是创build一个自定义指令，该指令将定位触发元素，并在点击应用元素时触发自定义事件closurespopup窗口。 当然，你必须从“trigger”元素中排除最初的点击事件，以及你想要在popover内部进行交互的元素。 因此，我添加了一个名为exclude-class的属性，以便您可以定义可添加到单击事件应被忽略的元素（不导致popup窗口closures）的类。
为了清理事件，当触发事件处理程序时，我们删除添加到触发器元素的触发器类。
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) } } }); } }; });
我把这个添加到body标签中，这样整个页面就可以作为popover的一个可允许的背景：
<body popover-close exclude-class="exclude">
而且，我将排除类添加到popover中的input中：
<input type="text" ng-model="dynamicPopover.title" class="form-control exclude">
所以，有一些调整和陷阱，但我会留给你：
- 如果没有定义，你应该在popover-close指令的链接函数中设置一个默认的排除类。
- 你需要知道的是，popover-close指令是绑定到元素的，所以如果你删除了html和body元素设置的样式以使它们达到100％的高度，那么如果你的内容不能不填充它。
在Chrome，Firefox和Safari上testing。
更新 ：在1.0版本中，我们添加了一个名为outsideClick的新触发器，当用户在popover或tooltip之外单击时，会自动closurespopup窗口或工具提示。
从0.14.0版本开始，我们添加了通过tooltip-is-open或popover-is-open属性以编程方式控制何时打开或closures工具提示/popuppopover-is-open 。
从Angular UI Bootstrap 1.0.0开始，有一个新的用于提示和popup的外部触发器（在这个拉取请求中引入）。在Angular UI Bootstrap 2.0.0中， popover-trigger被修改为使用angular度expression式（ Changelog ）值必须放在引号中。这个代码可以和当前版本的angular-ui一起工作：
<div id="new_button" uib-popover-template="plusButtonURL" popover-trigger="'outsideClick'" popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>
此代码将与旧版本的Angular UI Bootstrap（在2.0.0之前）一起使用：
<div id="new_button" uib-popover-template="plusButtonURL" popover-trigger="outsideClick" popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>
有一个名为popover-trigger的属性，您可以将属性focus分配给。
<button popover-placement="right" popover="On the Right!" popover-trigger="focus" class="btn btn-default"> Right </button>
这是诀窍！ 🙂
编辑：为了允许点击工具提示而不触发焦点丢失，请考虑类似于此的方法
如果你想让它工作在angular度上，尝试创build你自己的触发器定义。 如何做到这一点的build议可以在这里find 。
popover-trigger="'outsideClick'"这将完美的工作。
popover-trigger="outsideClick"这不会。
我花了一天的时间来解决它为什么不能为我工作。
这是因为他们使用这个代码检查这个"if (trigger === 'outsideClick')"
你在找什么
<button popover-trigger="outsideClick" class="btn btn-default"> Right </button>
从文档 – 外部点击触发器将导致popup单击切换，并隐藏其他任何单击时隐藏。
您可以使用：
标记
<div ng-app="Module"> <div ng-controller="formController"> <button uib-popover-template="dynamicPopover.templateUrl" popover-trigger="focus" popover-placement="left" type="button" class="btn btn-default"> Popover With Template </button> <script type="text/ng-template" id="myPopoverTemplate.html"> <div> <span>prasad!!</span> </div> </script> </div> </div>
使用Javascript
<script type="text/javascript"> var app = angular.module("Module", ['ui.bootstrap']); app.controller("formController", ['$scope', function($scope) { $scope.dynamicPopover = { templateUrl: 'myPopoverTemplate.html' }; }]); </script>
我有同样的问题和popover-trigger="'outsideClick'"为我工作。 有趣的是，文件没有说明这个问题。
angular度推进ui新版本1.x有设施外侧点击function。 升级到新版本。
<button uib-popover-template="updatePassword.templateUrl" popover-title="Update Password" popover-trigger="outsideClick" popover-placement="right" popover-append-to-body="true">Click here</button>
它为我工作。
popup窗口中的任何提交button或单击事件时，焦点将不起作用。 所以这个有用的办法。
那么' $ uibTooltipProvider'setTriggers方法中的' outsideClick '选项呢 ？ 文档说：“外部点击触发器将导致工具提示切换点击，并隐藏其他任何事情被点击。” 文档
将onclick="void(0)"行为添加到您的某些背景元素，这些元素在点击时将消除popup。
