Question

我有这个带模板的popover

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

当我按下＆＃39;软盘＆＃39;图标，我想关闭popover。有没有办法做到这一点？

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

Answer 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步：当您点击popover中的软盘图标时，请将isOpen设置为false：

这是popover的保存图标：

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

这是在控制器中：

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

参见 plunker

Answer 2

对我有用的（在angularJs app中）正在使用

酥料饼触发=＆＃34;＆＃39; outsideClick＆＃39;＆＃34;

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

＆＃34;＆＃39; outsideClick＆＃39;＆＃34;

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

酥料饼触发=＆＃34; outsideClick＆＃34;

示例：

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

ui.bootstrap popover关闭点击

2 个答案: