javascript - AngularJS 弹出窗口 - 点击主体时隐藏(内部 fiddle )

Question

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

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

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

此处的 fiddle 示例:

http://jsfiddle.net/5ww8e/79/

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您会发现许多对 Popover 有用的方法和事件。

在您的情况下，只需添加一个事件处理程序来监听“show”事件何时被触发并关闭任何其他弹出窗口即可。我只在 Fiddle 中添加了三行来执行此操作。

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

Full updated Fiddle here

请注意，我使用的是“show”事件，而不是“shown”事件。如果我在显示我刚刚选择的弹出窗口后在哪里关闭所有弹出窗口，它将关闭所有弹出窗口，包括我刚刚打开的弹出窗口。