Close AngularStrap popover

Question

When I click a button, it appears a popover which can be closed if you click the button inside the popover. However, if you click another button to open a popover, you will see two popovers at the same time and I want to keep just one.

I have tried with the trigger 'focus', but it closes the popover if I click in the textarea inside the popover, I expected that this trigger was called when you click outside of the popover.

Any idea for this? Can the methods $hide, $show be called from the controller?

Answer 1

OK, I am pretty sure this is a terrible hack, but here goes. Assuming your popover templates all use the popover class (if you aren't using a custom template with the data-template attribute, they should), and they're siblings of the button that triggers them (if you haven't mucked with the container attribute, they are), you can apply the following directive to your popover buttons. Note: this assumes that the parent elements of your popovers and popover buttons have unique ids.

angular.module('yourApp.directives', []).directive('rmPopovers',
    function($document,$rootScope,$timeout,$popover) {
        return {
            restrict: 'EA',
            link : function(scope, element, attrs) {
                var $element = $(element);
                $element.click(function() {
                    $('.popover').each(function(){
                        var $this = $(this);
                        if($this.parent().attr('id') != $element.parent().attr('id'))
                        {
                            $this.scope().$hide();
                        }
                    }
                    );
                });
            }
        }
    }
);

And then

<button type="button" bs-popover rm-popovers [your data attribs here]>Button!</button

Answer 2

Try to add ng-click="$hide()" on the dismissable element of the popover. I.E.:

<a class="btn btn-primary"  ng-click="$hide()">Close</a>

It's not included in the documentation but it works for me, iff you use data-template for popover content, haven't tried with other opened popover yet.

Answer 3

This should be an old question, in latest version of angular-strap, a new attribute could be used in this case: auto-close='1'

Answer 4

There is an issue in the angular-strap github project which asks exactly the feature you want.

Nevertheless, at the moment I'm writing this answer, it's still open.

Answer 5

trigger : 'focus' ,

worked for me on the same issue