从ui-bootstrap的0.14版开始,它看起来像uib-tooltip-html(previsously:tooltip-html-unsafe)不再起作用了......或者不是我过去使用它的方式。
基本上,'工具提示'适用于' tooltip-html'没有:
<a href="#" uib-tooltip-html="UIB-TOOLTIP-HTML">UIB-TOOLTIP-HTML</a>
<a href="#" tooltip-placement="right" uib-tooltip="UIB-TOOLTIP">UIB-TOOLTIP</a>
http://plnkr.co/edit/fJt3nBbT6rSbiN50h7Bp?p=preview
由于ui-bootstrap doc没有关于这个指令的例子,我无法猜出我做错了什么。
有什么想法吗?
答案 0 :(得分:12)
example of the documentation of version 0.14肯定会展示如何使用它。摘录:
HTML:
I can even contain HTML. <a href="#" uib-tooltip-html="htmlTooltip">Check me out!</a>
JS:
$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');
The latest doc也有一个例子:
HTML:
<p>
I can even contain HTML as a
<a href="#" uib-tooltip-html="htmlTooltip">scope variable</a> or
<a href="#" uib-tooltip-html="'static. {{dynamicTooltipText}}. <b>bold.</b>'">inline string</a>
</p>
JS:
$scope.dynamicTooltipText = 'dynamic';
$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');
答案 1 :(得分:0)
我必须这样做(感谢Herbi Shtini指出单引号黑客)
viewModel.tooltipContent = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');
<div uib-tooltip-html="'{{main.tooltipContent}}'" tooltip-placement="bottom">
答案 2 :(得分:0)
嘿,像这样尝试,我使用下面给出的 ubi-tooltip 获得html混合工具提示
在JS中。
app.controller("yoyoController", function($scope, $sce) {
$scope.text = $sce.trustAsHtml('Yo <b>Yo</b>');
});
在HTML
<div ng-controller="yoyoController">
<p uib-tooltip-html="text" >
A Thing With an HTML Tooltip
</p>
</div>