angular-ui-bootstrap - 内联 html UI Bootstrap 工具提示中的角度表达式

Question

我想不出在 uib-tooltip-html 中呈现角度表达式的正确方法。文档中使用的示例:<a href="#" uib-tooltip-html="'static. {{dynamicTooltipText}}. <b>bold.</b>'">inline string</a>在 IE、Chrome 或 Firefox 中对我不起作用。谁能指出我正确的方向？谢谢。

Answer 1

这是文档的摘录

uib-popover-html - Takes an expression that evaluates to an HTML string. Note that this HTML is not compiled. If compilation is required, please use the uib-popover-template attribute option instead. The user is responsible for ensuring the content is safe to put into the DOM!

有趣的是

The user is responsible for ensuring the content is safe to put into the DOM!

这基本上意味着您应该使用 $sce清理 HTML 并将其作为表达式传递给 Controller ​​的服务

$scope.dynamicTooltipText = "MY SUPER DYNAMIC TEXT"

$scope.htmlPopover = $sce.trustAsHtml('static. ' + $scope.dynamicTooltipText + ' . <b>bold.</b>');

然后将 $htmlPopover 传递给您的 uib-popover-html 指令

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

Demo plunker