关闭AngularStrap酥料饼 [英] Close AngularStrap popover

问题描述

当我点击一个按钮，它会出现一个酥料饼可如果你点击酥料饼里面的按钮关闭。但是，如果你点击另一个按钮，打开一个酥料饼，你会看到两个popovers在同一时间，我想保持一个。

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.

我曾尝试与触发'专注'，但如果我在里面酥料饼textarea的点击关闭酥料饼，我预计，当您单击酥料饼之外这触发被调用。

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.

你知道这个？可在方法$隐藏，$ SHOW从控制器叫什么名字？

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

推荐答案

OK，我是pretty肯定这是一个可怕的黑客，但在这里不用。假设全部使用酥料饼类（如果你不使用的数据模板的属性，他们应该自定义模板）的酥料饼模板，他们触发它们（如果​​你还没有在搞乱按钮的兄弟姐妹容器的属性，他们是），您可以将下面的指令到你的酥料饼按钮。注意：这里假设你的popovers和酥料饼按钮的父元素具有唯一ID

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();
                        }
                    }
                    );
                });
            }
        }
    }
);

然后

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

这篇关于关闭AngularStrap酥料饼的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！