ui.bootstrap 单击时弹出窗口关闭

Question

我有这个带模板的弹出框

<i class="fa fa-link" popover-placement="right" uib-popover-template="'newReferenceTemplate.html'" popover-title="New link"> Add new external reference </i>

因此，当我单击那个 link 图标时，会打开一个带有此模板的弹出窗口

<script type="text/ng-template" id="newReferenceTemplate.html">
  <label>Title</label> <br>
  <input ng-model="link.Title"> <br>
  <label>Url</label> <br>
  <input ng-model="link.Url"><br>
  <i class="fa fa-floppy-o" > Save </i>
</script>

当我按下 'floppy' 图标时，我想关闭弹出窗口。有什么方法可以做到这一点？

我所能找到的 on documentation 是 popover-is-open 值，但我不知道我是否可以以某种方式使用它，有什么想法吗？

Answer 1

第 1 步： 将 popover-is-open="isOpen" 添加到触发器 link。

<i class="fa fa-link add-link" 
        popover-placement="right" 
        uib-popover-template="'newReferenceTemplate.html'" 
        popover-is-open="isOpen"
        popover-title="New link"> Add new external reference </i>

第 2 步： 当您单击弹出框内的软盘图标时，将 isOpen 设置为 false：

这是弹出窗口的保存图标：

<i class="fa fa-floppy-o" ng-click="save()"> Save </i>

这是在控制器中：

$scope.save = function () {
  $scope.isOpen = false;  
};

见plunker

Answer 2

对我有用的（在 angularJs 应用程序中）正在使用

popover-trigger="'outsideClick'"

请注意按原样使用它，即字符串的硬拷贝

"'outsideClick'".

如果你不使用angularJs，你可以写：

popover-trigger="outsideClick"

示例：

<div uib-popover-template="'ApproveReject.html'"
     popover-trigger="'outsideClick'"
     popover-placement="bottom-right"
     ng-click="onSubmitOrderStatus('date',$event);approveDates('date')">
    Approve
</div>

ui.bootstrap 单击时弹出窗口关闭

ui.bootstrap popover close on click

angularjs

angular-ui-bootstrap