注意：现在你不能用锚本身关闭它..

Question

如果用户在弹出窗口外单击，我想关闭弹出窗口。在下面的代码中。发布了一些示例，这些示例是为了在弹出窗口外点击但没有工作而发布的。

<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link  rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="https://code.angularjs.org/1.2.22/angular.js"></script>
</head>
<body ng-app="myApp">
    <div class="example" ng-controller="MyCtrl">
        <a class="btn btn-lg btn-success" href="javascript:;" popover ng-click="click()">popover</a>
        <div style="display:none">
            <div class="pop-content" id="val">
                {{ myVar }}
                <input type="button" />
            </div>
        </div>
      
        <input ng-model="myVar">
    </div>
</body>
</html>
<script>
    var myApp = angular.module('myApp', []);
    myApp.controller('MyCtrl', function ($scope) {
        $scope.myVar = 3 + 4;   
    }) 
    myApp.directive('popover', function ($compile) {
        return {
            link: function (scope, element, attrs) {
                // define popover for this element
                $(element).popover({
                    html: true,
                    placement: "top",
                    // grab popover content from the next element
                    content: $compile($(element).siblings(".pop-content").contents())(scope)
                });
            }
        }
    });

</script>

Answer 1

好像你遇到了一个Twitter bootstrap bug ..看到这个问题here

您需要更改html以允许此功能。

<a class="btn btn-lg btn-success" href="javascript:;" popover ng-click="click()">popover</a>

到

<a popover class="btn btn-lg btn-success" href="javascript:;" tabindex="0" data-trigger="focus" >popover</a>

另一个问题是您没有正确提供JavaScript中的content。

$(element).siblings("div").children(".pop-content").contents()

我在你链接功能里面做了这个。

这是plunk

注意：现在你不能用锚本身关闭它..

----------- ----------更新

要实现这一点，你必须做这样的事情data-trigger="click focus"，但是通过使用这个，我遇到了一个不寻常的错误。首次点击弹出式弹出按钮立即打开并关闭..

如何在角度js点击外面关闭一个弹出窗口

1 个答案:

注意：现在你不能用锚本身关闭它..

----------- ----------更新