带有关闭按钮的Angular UI Bootstrap弹出框

Question

我正在使用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" +
    "");
}]);

我考虑编写一个指令来关闭按钮，以触发“带关闭按钮的弹出框”的“点击”事件。但我不确定这是否是正确的方法。

正确的方法是什么？

- Web Freak

---

我仍然无法相信他们没有实现一个关闭按钮。 - UltraSonja

Answer 1

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

您可以在 这里 查看更新后的文档（和示例）。

- icfantv

Answer 2

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

这是它的样子 plunker

这是关于此事的pull request。

- maxisam

---

很遗憾它没有工作，有计划修复吗？这将会非常有用！ :) - TimoSolo