关闭弹出窗口以角度单击外部某处答案

【问题标题】：Close popover clicking somewhere outside in angular关闭弹出窗口以角度单击外部某处
【发布时间】：2014-08-04 08:24:40
【问题描述】：

我有这样的事情：

http://plnkr.co/edit/CoDdWWQz8jPPM4q1mhC5?p=preview

我想做的是在点击外面的某个地方后关闭弹出窗口。我知道有类似的问题，但我想知道如何在 Angular 中做到这一点。问题是，我的弹出框位于脚本标签内。

<script type="text/ng-template" id="templateId.html">
  This is the content of the template {{name}}
</script>

【问题讨论】：

Hide Angular UI Bootstrap popover when clicking outside of it的可能重复

标签： angularjs twitter-bootstrap popover

【解决方案1】：

在引导程序的文档中，他们有一个example of a 'dismissable' popover。

诀窍是将trigger: 'focus' 添加到您的弹出框选项中。然后，您需要将您的元素更改为“可聚焦”元素（在此示例中，我使用了一个按钮）

Here is my fork of your example.

附言。值得一提的是，并非所有元素本身都是“可聚焦的”。您可以确保元素可以成为焦点，但添加属性tabindex（例如tabindex="-1"）。

【讨论】：

我的“按钮”应用在跨度标签中。您能告诉我如何将您的解决方案应用到我的示例中吗？
您的示例中没有 span 标签或按钮。你不是说标签吗？
在我的项目中，我有这样的想法：。这个想法几乎是一样的，但我使用的是带有引导图标的跨度而不是元素
我知道这已经很晚了，但是@TheOpti，如果你给你的 span 元素添加一个 tabindex 属性，它就会变成'focusable'，然后你可以使用 popover-trigger="focus" 解决方案。我认为这比创建整个指令或在整个文档上使用侦听器更优雅。
@haxxxton 我认为如果您添加有关如何使元素“可聚焦”的提示（使用 tabindex 属性），这应该是公认的答案

【解决方案2】：

看来我已经找到了我的问题的答案。我们需要做的就是应用这个解决方案：How to dismiss a Twitter Bootstrap popover by clicking outside? 到负责显示弹出框的指令。更重要的是，我们需要在我们的按钮上添加data-toggle="popover"。

而且，令人惊讶的是，它的效果非常好。

【讨论】：

很高兴您找到了合适的答案。但是，为了问题的完整性，您应该发布带有更改的新指令代码。以便人们在未来看到解决方案。此外，如果您单击答案上的共享，您可以共享用于查找解决方案的答案而不是问题。干杯
我找不到角度的完整性示例。你介意把我链接到它吗？ @TheOpti

【解决方案3】：

如果您希望它在任何类型的元素上无缝工作，而无需使用任何外部代码或奇怪的东西，您所要做的就是将这 2 个属性添加到您的标记中：tabindex="0" 以使元素具有焦点, 和 popover-trigger="focus" 使其在您单击关闭后关闭弹出窗口。

<i> 标记的示例，不可聚焦：

<i popover-html="someModelWhichContainsMarkup" popover-trigger="focus"
tabindex="0" class="fa fa-question-circle"></i>

【讨论】：

【解决方案4】：

您可以使用以下代码：

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

在脚本中：

<script type="text/javascript">
    var app = angular.module("Module", ['ui.bootstrap']);
    app.controller("formController", ['$scope', function ($scope) {
        $scope.dynamicPopover = {
            templateUrl: 'myPopoverTemplate.html'
        };
    }]);
</script>

【讨论】：

【解决方案5】：

为我工作，将此属性添加到正在调用/打开弹出窗口的标签中，不要错过 outsideClick 的单引号

popover-trigger="'outsideClick'"

【讨论】：

【解决方案6】：

这只会打开一个弹出框，并在单击弹出框外部时关闭

popover-trigger="outsideClick"

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。