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" +
    "");
}]);

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

正确的方法是什么？

Answer 1

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

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

Answer 2

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

以下是plunker

的样子

这是pull request。

带有关闭按钮的Angular UI Bootstrap popover

2 个答案: