uib-popover 未在外部单击时关闭答案

【问题标题】：uib-popover not closing on outside clickuib-popover 未在外部单击时关闭
【发布时间】：2017-02-13 19:00:25
【问题描述】：

我正在使用 Angular UI Bootstrap Popover，但我无法让它在外部点击时关闭。我正在使用 outsideClick 触发器 (popover-trigger="outsideClick") 为什么这不起作用？

  <button uib-popover-template="'myPopoverTemplate.html'"  
   popover-placement="right"class="btn btn-default"
   popover-trigger="outsideClick">Click Me</button>

PLUNKER

编辑： 这适用于 ui-bootstrap 1.x.x（例如 1.3.3）。这在 2.x.x 中不支持吗？

【问题讨论】：

标签： angularjs angular-ui-bootstrap

【解决方案1】：

问题出在您的 cdn 文件中。检查下面的工作代码-

<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script>
  <script src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">


</head>

<body >
  <div  ng-controller="PopoverDemoCtrl">
   <h1>Popover Test</h1>

    <button uib-popover-template="'myPopoverTemplate.html'"  
            popover-placement="right"
            class="btn btn-default" popover-trigger="outsideClick"
            >
      Click Me
      </button>


    <script type="text/ng-template" id="myPopoverTemplate.html">

      <label> Why does this popover not close on outside click? </label>
    </script>
  </div>
</body>

</html>

【讨论】：

ui-bootstrap 2.x.x 不支持这个吗？
不符合 angular-ui.github.io/bootstrap 上的文档“outsideClick 触发器将导致弹出框在单击时切换，并在单击其他任何内容时隐藏。”

【解决方案2】：

这是因为在 ui-bootstrap 2.x.x 上你必须这样做：

popover-trigger="'outsideClick'">Click Me</button>

或者使用类似的东西

$scope.myTrigger = "outsideClick" then
popover-trigger="myTrigger">Click Me</button>

感谢@AngularPlayer

【讨论】：