Question

我有一个简单的项目列表 - 每个项目都有一个带有引导程序弹出窗口的按钮。

1 /我想确保一次只打开一个弹出窗口 - 目前我可以点击每个按钮并有多个打开/重叠弹出窗口。

2 /点击按钮外部 - 当前打开的弹出窗口应该关闭。

示例小提琴：

var app = angular.module("app", []);
app.controller('my_controller', function($scope) {  
  $scope.all_countries = [{"id":28,"title":"Sweden"}, {"id":56,"title":"USA"}, {"id":89,"title":"England"}];
});

app.directive('bsPopover', function() {
    return function(scope, element, attrs) {
        element.find("a[rel=popover]").popover({ placement: 'bottom', html: 'true'});
    };
});

Answer 1

可悲的是，没有任何东西可以用于此，类似于具有某些行为的弹出群组。相反，你必须自己实现它。

如果你看看Bootstrap Docs on Popovers，你会发现很多有用的方法和活动为Popovers。

在你的情况下，就像添加一个事件处理程序来监听＆＃34; show＆＃34;触发事件并关闭任何其他弹出窗口。我为你的小提琴添加了三行来做这件事。

element.find("a[rel=popover]").on('show.bs.popover', function () {
    $('a[rel=popover]').popover('hide');
});

Full updated Fiddle here

请注意，我正在使用＆＃34; show＆＃34;事件而不是＆＃34;显示＆＃34;事件。如果我在刚刚选择的popover之后关闭所有popover的地方显示它将关闭所有的弹出窗口，包括我刚打开的那个。

AngularJS popover - 隐藏在点击身体（小提琴里面）

1 个答案: