16

I am using Angular UI Bootstrap to create a popover but I am unable to find the option to add a close button inside the popover.

I customized the popover template to include the close button. But I am still unable to find a function/event to close the popover. Setting isOpen to false works for the first time as it just overwrites the function - but thereafter becomes unusable.

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

Here is the template script:

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

I thought of writing a directive for close button to trigger the 'click" event of "POPOVER WITH CLOSE" button. But I am not sure if that's the approach to follow.

What's the correct approach to follow?

4

2 回答 2

1

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

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

于 2016-04-27T14:54:44.290 回答
0

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

这是它的样子

这是对此的拉取请求。

于 2013-07-11T18:41:01.093 回答