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>

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

Solution 2

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").

Solution 3

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>

Comments

[TheOpti]

My 'button' is applied in span tags. Could you tell me how to apply your solution to my example?

[Blackunknown]

There are no span tags in your example or a button for that matter. Don't you mean a tag?

[TheOpti]

In my project I have somethink like this: <span class="glyphicon glyphicon-user" data-toggle="popover" popover-placement="bottom" popover-trigger="click" sc-user-template-popover ng-hide="!data.isLoggedIn()"></span> . The idea is almost the same but I'm using span with bootstrap icon instead of <a> element

[Blackunknown]

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

[bryan]

I can't find the completeness example for angular. Do you mind linking me to it? @TheOpti

[o4ohel]

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]

@haxxxton I think this should be the accepted answer if you add a hint on how to make elements 'focusable' (use the tabindex attribute)

[DimaSan]

While this code snippet may solve the question, including an explanation 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.