如何将html注入Angular UI引导弹出窗口

How to inject html into an Angular UI bootstrap popover

本文关键字：窗口 UI Angular html 注入      更新时间：2023-09-26

如何将html注入Angular UI引导弹出窗口?我更喜欢简单地显示和隐藏一个div与所有的弹出窗口的html内容。

现在我有:

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

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

看起来他们一直在努力使这个选项，他们甚至有一个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' );
}]);

但是我可能只会用dropdown

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

在angular中，你应该做一个指令来处理这个问题。

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

html弹出窗口在angular UI bootstrap中还没有实现

在刚刚过去的这个周末，popover-template特性作为Angular UI bootstrap 0.13.0版本的一部分发布了。它允许你设置一个HTML模板作为弹出窗口的主体。

请使用uib-popover-html指令。只需为它提供一个包含URL的模型，该URL表示用于弹出窗口主体的模板的位置。
注意这个模板的内容需要用一个标签来包装，例如

相关文章：