Question

http://plnkr.co/edit/hqXGl47EJ0wVaEgoXk3X?p=preview

我试图找到实现这一目标的最佳方法。基本上我们的应用程序中有几个popovers，用于模糊搜索，附加选项，帮助提示等等。

当其中任何一个打开时，如果用户点击它外面的任何其他位置（例如正文），则需要关闭它们。

vs.togglePopover = function() {
    vs.searchPopoverDisplay = vs.searchPopoverDisplay === false ? true: false;
};

目前我身体上的ng-click：

vs.closePopovers = function() {
    PopFactory.hidePopovers();
};

这会联系工厂服务，该服务获取具有弹出框的所有控制器/指令的范围，如果它们是打开的，则关闭它们。

当然这会使弹出窗口无法使用，因为只要您单击按钮打开弹出窗口，主app.js控制器就会检测到一个正文单击并关闭它。

var hidePopovers = function() {
    searchPopover     = ScopeFactory.getScope('search');
    tagsSearchPopover = ScopeFactory.getScope('tagsPopover');
    tagsSortPopover   = ScopeFactory.getScope('tagsSearch');
    tagsPanel         = ScopeFactory.getScope('tagsPanel');

    // is this popover open?
    // if so close it, see the problem?
    if (searchPopover.searchPopoverDisplay) {
        searchPopover.searchPopoverDisplay = false;
    }

    if (tagsSearchPopover.tagSearchPopover) {
        tagsSearchPopover.tagSearchPopover = false;
    }

    if (tagsSortPopover.tagsPopoverDisplay) {
        tagsSortPopover.tagsPopoverDisplay = false;
    }

    if (tagsPanel.showingTagSearchInput) {
        tagsPanel.showingTagSearchInput = false;
    }
};

return {
    hidePopovers : hidePopovers
};

此功能通常如何在有弹出窗口的应用中解决？

Answer 1

为什么不使用活动？

点击：

vs.closePopovers = function() {
    $rootScope.$broadcast('closeAllPopovers');
};

然后，在每个popover的范围内：

scope.$on('closeAllPopovers', function(){
    close(); // Or however you close a popover
});

Angular Documentation for $on

使用评论中链接的Plunk：

单击按钮时，您可以看到按钮单击和正文单击的日志消息（记录BTW的好工作）。这意味着您只需按下按钮（打开弹出按钮）和按主体（关闭弹出框）处理按钮。

看看这个Plunk

要停止此行为，您需要告诉ng-click事件停止向上传播元素的层次结构。值得庆幸的是，一旦你知道这一点，这很容易。 Related SO Question（我更喜欢第二个答案，我不喜欢.html中的多余代码）

如何关闭Angular上的所有弹出窗口？

1 个答案: