ui.bootstrap popover close on click

All we need is an easy explanation of the problem, so here it is.

I have this popover with template

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

So when I click on that link icon, a popover opens witht this tamplate

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

When I press that ‘floppy’ icon, I’d like to close the popover. Are there any ways of doing this?

All I can find on documentation is the popover-is-open value, but I don’t know if I can use this somehow, any thoughts?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Step 1 : Add popover-is-open="isOpen" to the trigger 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>

Step 2 : When you click the floppy icon inside the popover, set isOpen to false:

This is the save icon of the popover:

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

This is in the controller:

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

See plunker

Method 2

What had worked for me (in an angularJs app) is using

popover-trigger=”‘outsideClick'”

be aware to use it as it is, means, hard copy of string

“‘outsideClick'”.

If u don’t use angularJs, u can just write:

popover-trigger=”outsideClick”

Example:

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

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply