Question

我有这样的事情：

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

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

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

Answer 1

在bootstrap的文档中，他们有example of a 'dismissable' popover。

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

Here is my fork of your example

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

Answer 2

看起来我找到了问题的答案。我们需要做的就是将此解决方案：How to dismiss a Twitter Bootstrap popover by clicking outside?应用于负责显示弹出窗口的指令。还有什么，我们需要在我们的按钮上添加data-toggle="popover"。

令人惊讶的是，它运作良好。

Answer 3

如果你想让它在任何类型的元素上无缝地工作而不必使用任何外部代码或奇怪的东西，你所要做的就是将这两个属性添加到你的标记中：tabindex =“0”使元素可以聚焦和popover-trigger =“focus”，一旦你点击关闭就会关闭弹出窗口。

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

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

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

Answer 5

为我工作，请将此属性添加到正在调用/打开弹出窗口的标签中，不要在outsideClick周围遗漏单个报价

popover-trigger="'outsideClick'"

Answer 6

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

popover-trigger="outsideClick"

关闭popover点击外面的角度

6 个答案: