带有关闭按钮的 Angular UI Bootstrap 弹出框 [英] Angular UI Bootstrap popover with close button
问题描述
我正在使用 Angular UI Bootstrap 创建弹出框,但我找不到在弹出框内添加关闭按钮的选项.
我自定义了弹出框模板以包含关闭按钮.但是我仍然无法找到关闭弹出窗口的函数/事件.第一次将 isOpen 设置为 false 会起作用,因为它只会覆盖该函数 - 但此后变得无法使用.
这是模板脚本:
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"按钮的click"事件.但我不确定这是否是要遵循的方法.
应该遵循的正确方法是什么?
现在正确的解决方案是通过 uib-popover-template
属性指定一个弹出框模板,并绑定模板的关闭按钮的 ng-click
处理程序到弹出窗口的 popover-is-open
属性.我们添加了此属性以允许用户忽略"提供的触发器选项(通过指定 popover-trigger="none"
并让用户完全控制何时显示和隐藏弹出框.>
您可以在此处查看更新的文档(和示例).>
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?
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.
这篇关于带有关闭按钮的 Angular UI Bootstrap 弹出框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!