ui.bootstrap 弹出框点击关闭答案

【问题标题】：ui.bootstrap popover close on clickui.bootstrap 弹出框点击关闭
【发布时间】：2018-05-01 17:42:51
【问题描述】：

我有这个带有模板的弹出框

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

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

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

当我按下“软盘”图标时，我想关闭弹出框。有没有办法做到这一点？

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

【问题讨论】：

找到了一个可以做到这一点的 plunkr：plnkr.co/edit/QhshtRqwpdsirvdFj9JG?p=preview
那是......很多代码，我会尝试解密它，看看我想出了什么，谢谢你的回复

标签： angularjs angular-ui-bootstrap

【解决方案1】：

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

<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

【讨论】：

【解决方案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>

【讨论】：