带有关闭按钮的 Angular UI Bootstrap 弹出窗口答案

【问题标题】：Angular UI Bootstrap popover with close button带有关闭按钮的 Angular UI Bootstrap 弹出窗口
【发布时间】：2013-06-18 14:20:33
【问题描述】：

我正在使用 Angular UI Bootstrap 创建一个弹出框，但我找不到在弹出框内添加关闭按钮的选项。

我自定义了弹出框模板以包含关闭按钮。但我仍然无法找到关闭弹出框的函数/事件。将 isOpen 设置为 false 首次起作用，因为它只是覆盖了函数 - 但此后变得无法使用。

 <button popover-placement="bottom" popover="test">POPOVER WITH CLOSE<button>

这是模板脚本：

angular.module("template/popover/popover.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/popover/popover.html",
    "<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
    "  <div class=\"arrow\"></div>\n" +
    "\n" +
    "  <div class=\"popover-inner\">\n" +
    "      <button ng-click=\"isOpen = !isOpen()\" class=\"btn-popover-close btn btn-primary\">Close</button>\n" +
    "      <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" +
    "      <div class=\"popover-content\" ng-bind=\"content\"></div>\n" +
    "  </div>\n" +
    "</div>\n" +
    "");
}]);

我想为关闭按钮编写一个指令来触发“POPOVER WITH CLOSE”按钮的“点击”事件。但我不确定这是否是要遵循的方法。

正确的做法是什么？

【问题讨论】：

我还是不敢相信他们还没有实现关闭按钮。

标签： popover angular-ui-bootstrap

【解决方案1】：

现在正确的解决方案是通过uib-popover-template 属性指定弹出框模板，并将模板的关闭按钮的ng-click 处理程序绑定到弹出框的popover-is-open 属性。我们添加了此属性以允许用户“忽略”提供的触发选项（通过指定 popover-trigger="none" 并让用户完全控制何时显示和隐藏弹出框。

您可能会看到更新后的文档（和示例）here。

【讨论】：

【解决方案2】：

我更改了工具提示和弹出框代码。

这是plunker的样子

这是pull request。

【讨论】：

可惜它不起作用.. 有修复它的计划吗？会很有用！ :)