Question

如何将html注入Angular UI boostrap popover？我更喜欢用所有popover html内容显示和隐藏div。

现在我有：

<a popover-placement="bottom" popover-append-to-body="true" popover="LOG OUT">BUTTON HERE</a>

我想用完整的html替换文本LOG OUT，包括Angular.js绑定和指令。

Answer 1

看起来他们一直试图让它成为一个选项，他们甚至有tooltip-html-unsafe似乎适用于工具提示。

<a popover-placement="bottom" popover-append-to-body="true" popover="<h1>LOG OUT</h1>" tooltip-html-unsafe>BUTTON HERE</a>

你可以使用popover版本，这样的工作：

angular.module( 'ui.bootstrap.popover')
  .directive( 'popoverHtmlUnsafePopup', function () {
  return {
   restrict: 'EA',
   replace: true,
   scope: { content: '@', placement: '@', animation: '&', isOpen: '&' },
     templateUrl: 'template/tooltip/tooltip-html-unsafe-popup.html'
   };
 })
.directive( 'popoverHtmlUnsafe', [ '$tooltip', function ( $tooltip ) {
  return $tooltip('popoverHtmlUnsafe', 'popover', 'click' );
}]);

但我可能只使用dropdown。

Answer 2

根据bootstrap的文档http://getbootstrap.com/javascript/#popovers，您可以使用html属性设置html。您可以使用数据属性或javascript来设置它。虽然我只建议使用模板属性而不是html属性。

在角度方面，你应该制定一个处理这个问题的指令。

根据：https://github.com/angular-ui/bootstrap/blob/master/src/popover/popover.js

html popovers尚未在角度UI引导程序中实现

Answer 3

截至上周末，popover-template功能已作为Angular UI bootstrap版本0.13.0的一部分发布。它允许您将HTML ng模板设置为弹出窗口的主体。

Answer 4

只需使用uib-popover-html指令即可。只需提供一个模型，其中包含表示用于弹出框体的模板位置的URL 请注意，此模板的内容需要包含在标记中，例如

如何将html注入Angular UI bootstrap popover

4 个答案: