twitter-bootstrap 关闭弹出窗口单击角度外部的某处
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25114452/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Close popover clicking somewhere outside in angular
提问by TheOpti
I have something like this:
我有这样的事情：
http://plnkr.co/edit/CoDdWWQz8jPPM4q1mhC5?p=preview
http://plnkr.co/edit/CoDdWWQz8jPPM4q1mhC5?p=preview
What I would like to do is closing the popover window after clicking somewhere outside. I know that there were similar questions but I would like to know how to do that in Angular. Problem is, my popover is located inside script tag.
我想做的是在点击外面的某个地方后关闭弹出窗口。我知道有类似的问题，但我想知道如何在 Angular 中做到这一点。问题是，我的弹出框位于脚本标签内。
<script type="text/ng-template" id="templateId.html">
This is the content of the template {{name}}
</script>
采纳答案by TheOpti
Looks like I have found an answer to my question. All we need to do is to apply this solution: How to dismiss a Twitter Bootstrap popover by clicking outside?to directive responsible for showing popover. What's more, we need to add data-toggle="popover"to our button.
看起来我已经找到了我的问题的答案。我们需要做的就是应用此解决方案：如何通过单击外部来关闭 Twitter Bootstrap 弹出窗口？到负责显示弹出框的指令。更重要的是，我们需要添加data-toggle="popover"到我们的按钮。
And, surprisingly, it works very well.
而且，令人惊讶的是，它运作良好。
回答by haxxxton
In bootstrap's documentation they have an example of a 'dismissable' popover.
在 bootstrap 的文档中，他们有一个 'dismissable' popover的例子。
The trick is to add trigger: 'focus'to your popover options. You then need to change your element to a 'focusable' element (in this example i have used a button)
诀窍是添加trigger: 'focus'到您的弹出窗口选项中。然后，您需要将元素更改为“可聚焦”元素（在本例中，我使用了一个按钮）
Here is my fork of your example.
PS. it is worth mentioning that not all elements are natively 'focusable'. You can make sure that an element can become focusable, but adding the attribute tabindex(eg. tabindex="-1").
附注。值得一提的是，并非所有元素本身都是“可聚焦的”。您可以确保元素可以成为焦点，但添加属性tabindex（例如。tabindex="-1"）。
回答by HeberLZ
If you want it to work seamlessly on any kind of elements without having to use any external code nor weird things, all you have to do is add this 2 attributes to your markup: tabindex="0" to make the element focusable, and popover-trigger="focus" to make it dismiss the popup once you click off.
如果您希望它在任何类型的元素上无缝工作而无需使用任何外部代码或奇怪的东西，您所要做的就是将这 2 个属性添加到您的标记中：tabindex="0" 使元素可聚焦，并弹出-trigger="focus" 使其在您单击关闭后关闭弹出窗口。
Example with <i>tag which is not focusable:
带有<i>不可聚焦标记的示例：
<i popover-html="someModelWhichContainsMarkup" popover-trigger="focus"
tabindex="0" class="fa fa-question-circle"></i>
回答by SwapnilKumbhar
Works for me, add this attribute to the tag which is calling/opening the popup, DON'T MISS THE SINGLE QUOTES AROUND outsideClick
对我有用，将此属性添加到调用/打开弹出窗口的标签中，不要错过外面的单引号
popover-trigger="'outsideClick'"
回答by Prasad Shigwan
You can use following code:
您可以使用以下代码：
<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>
In Script :
在脚本中：
<script type="text/javascript">
var app = angular.module("Module", ['ui.bootstrap']);
app.controller("formController", ['$scope', function ($scope) {
$scope.dynamicPopover = {
templateUrl: 'myPopoverTemplate.html'
};
}]);
</script>
回答by tsuz
This opens only one popover and closes upon clicking outside of popover
这只会打开一个弹出框，并在弹出框外单击时关闭
popover-trigger="outsideClick"
