如何在Angular UI bootstrap的弹出窗口中注入HTML

Question

如何将HTML注入到Angular UI Bootstrap Popover中？我更喜欢通过显示和隐藏包含所有弹出窗口HTML内容的div来实现。

目前我的代码是：

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

我希望你能翻译以下内容：将文本中的LOG OUT替换为完整的HTML代码，其中包括Angular.js的绑定和指令。

- Justin

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>

你可以尝试使用弹出版本，类似这样的效果：

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

但我可能会只使用一个下拉菜单。

- Dylan

---

是的，这样应该可以工作，我正在使用这个提交拉取请求，只是今天没有完成它。 - Andrei Dvoynos

Answer 2

只需使用 uib-popover-html 指令。只需要提供一个模型，其中包含表示用于浮动窗体主体的模板位置的 URL。
请注意，此模板的内容需要包装在一个标记中，例如：

- Manas

Answer 3

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

在Angular中，您应该创建一个指令来处理这个问题。

---

根据：https://github.com/angular-ui/bootstrap/blob/master/src/popover/popover.js 在Angular UI Bootstrap中，HTML弹出框尚未实现。

- Andrei Dvoynos

---

我正在使用 http://angular-ui.github.io/bootstrap/ 这个指令，因此想知道如何在其中使用HTML。 - Justin

Answer 4

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

- user3915158