Angular UI Bootstrap popover with close button
The right solution now is to specify a popover template via the uib-popover-template
attribute and bind your template's close button's ng-click
handler to the popover's popover-is-open
property. We added this property to allow the user to "ignore" the provided trigger options (by specifying popover-trigger="none"
and give the user full control over when to show and hide the popover.
You may see the updated docs (and examples) here.
![Admin](/assets/logo_square_200-5d0d61d6853298bd2a4fe063103715b4daf2819fc21225efa21dfb93e61952ea.png)
Admin
Updated on June 15, 2022Comments
-
Admin about 2 years
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?