Question

我正在尝试使用uib-popover-html指令，但它不会显示。如果我使用uib-popover或uib-popover-template指令，它会正确显示。我错过了什么吗？

这有效

$scope.dynamicPopover = {
    content: 'Hello, World!',
    templateUrl: 'app/login/popover.html',
    title: 'Title'
};


<!-- popover.html -->
<div>
  <b style="color: red">I can</b> have <div class="label label-success">HTML</div> content
</div>
<!-- /popover.html -->

<button uib-popover="I appeared on mouse enter!" popover-trigger="mouseenter" type="button" class="btn btn-default">Mouseenter</button>

<button uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Popover With Template</button>

这不是

<button uib-popover-html="htmlPopover" class="btn btn-default">HTML Popover</button>

Answer 1

尝试使用$ sce（Strict Contextual Escaping）来显示HTML是安全的：

$htmlPopover = $sce.trustAsHtml('<div>Popover Content</div>');

此功能的存在是为了避免用户输入可能是恶意的HTML等形式。

参考文献：https://docs.angularjs.org/api/ng/service/ $ sce

角度bootstrap html popover没有显示

1 个答案: