Close popover clicking somewhere outside in angular

Question

I have something like this:

http://plnkr.co/edit/CoDdWWQz8jPPM4q1mhC5?p=preview

What I would like to do is closing the popover window after clicking somewhere outside. I know that there were similar questions but I would like to know how to do that in Angular. Problem is, my popover is located inside script tag.

<script type="text/ng-template" id="templateId.html">
  This is the content of the template {{name}}
</script>

Possible duplicate of [Hide Angular UI Bootstrap popover when clicking outside of it](http://stackoverflow.com/questions/30512748/hide-angular-ui-bootstrap-popover-when-clicking-outside-of-it) — cdauth, Nov 26 '15 at 05:24

haxxxton · Answer 1 · 2015-12-07T06:58:24.147

3

In bootstrap's documentation they have an example of a 'dismissable' popover.

The trick is to add trigger: 'focus' to your popover options. You then need to change your element to a 'focusable' element (in this example i have used a button)

Here is my fork of your example.

PS. it is worth mentioning that not all elements are natively 'focusable'. You can make sure that an element can become focusable, but adding the attribute tabindex (eg. tabindex="-1").

edited Dec 07 '15 at 06:58

answered Aug 04 '14 at 08:38

haxxxton

6,422
3
27
57

My 'button' is applied in span tags. Could you tell me how to apply your solution to my example? – TheOpti Aug 04 '14 at 08:44
There are no span tags in your example or a button for that matter. Don't you mean a tag? – Blackunknown Aug 04 '14 at 08:48
In my project I have somethink like this: . The idea is almost the same but I'm using span with bootstrap icon instead of element – TheOpti Aug 04 '14 at 08:51
I know this is late but @TheOpti, if you add a tabindex attribute to your span element, it becomes 'focusable' and then you can use the popover-trigger="focus" solution. I think it is more elegant then creating a whole directive or using a listener on the entire document. – o4ohel Dec 03 '15 at 23:49
1

@haxxxton I think this should be the accepted answer if you add a hint on how to make elements 'focusable' (use the tabindex attribute) – o4ohel Dec 03 '15 at 23:52

score 1 · Accepted Answer · edited May 23 '17 at 12:24

1

Looks like I have found an answer to my question. All we need to do is to apply this solution: How to dismiss a Twitter Bootstrap popover by clicking outside? to directive responsible for showing popover. What's more, we need to add data-toggle="popover" to our button.

And, surprisingly, it works very well.

edited May 23 '17 at 12:24

Community

1
1

answered Aug 04 '14 at 08:40

TheOpti

1,641
3
21
38

1

Nice that you found a suitable answer. You should however for the completeness of the question post the new directive code with the changes. So that people can see the solution in the future. Also if you click share on the answer you can share the answer you used to find the solution instead of the question. Cheers – Blackunknown Aug 04 '14 at 08:59
1

I can't find the completeness example for angular. Do you mind linking me to it? @TheOpti – bryan May 28 '15 at 05:21

score 1 · Answer 3 · answered Dec 03 '15 at 21:56

If you want it to work seamlessly on any kind of elements without having to use any external code nor weird things, all you have to do is add this 2 attributes to your markup: tabindex="0" to make the element focusable, and popover-trigger="focus" to make it dismiss the popup once you click off.

Example with <i> tag which is not focusable:

<i popover-html="someModelWhichContainsMarkup" popover-trigger="focus"
tabindex="0" class="fa fa-question-circle"></i>

score 0 · Answer 4 · answered Nov 01 '15 at 09:16

You can use following code:

<div ng-app="Module">
    <div ng-controller="formController">
<button uib-popover-template="dynamicPopover.templateUrl" popover-trigger="focus" popover-placement="left" type="button" class="btn btn-default">Popover With Template</button>

<script type="text/ng-template" id="myPopoverTemplate.html">
            <div>
                <span>prasad!!</span>
            </div>
</script>
</div>
</div>

In Script :

<script type="text/javascript">
    var app = angular.module("Module", ['ui.bootstrap']);
    app.controller("formController", ['$scope', function ($scope) {
        $scope.dynamicPopover = {
            templateUrl: 'myPopoverTemplate.html'
        };
    }]);
</script>

SwapnilKumbhar · Answer 5 · 2019-09-30T06:58:06.593

0

Works for me, add this attribute to the tag which is calling/opening the popup, DON'T MISS THE SINGLE QUOTES AROUND outsideClick

popover-trigger="'outsideClick'"

edited Sep 30 '19 at 06:58

answered Sep 29 '19 at 09:24

SwapnilKumbhar

347
2
5
17

Taku · Answer 6 · 2016-12-19T12:07:31.230

-1

This opens only one popover and closes upon clicking outside of popover

popover-trigger="outsideClick"

edited Dec 19 '16 at 12:07

answered Dec 19 '16 at 10:50

Taku

5,639
2
42
31

3

While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – DimaSan Dec 19 '16 at 11:09

Close popover clicking somewhere outside in angular

6 Answers6