angularjs - ui-bootstrap 0.13 - 如何在 ng-repeat 中使用 tooltip-html

Question

尝试从 tooltip-html-unsafe 切换到 tooltip-html，因为前一个在 ui-bootstrap 0.13.0 中已弃用

在示例中，tooltip-html 内容在 Controller 中提供为

<a href="#" tooltip-html="htmlTooltip">Check me out!</a>

$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!')

当内容位于 ng-repeat 中时，是否有适当的解决方案？简单地切换到 tooltip-html 会产生 $parse 错误

编辑/解决方案:

实际上，我通过简单地添加单引号来解决这个问题，如下所示:

tooltip-html="'Line 1<br>Line <strong>2</strong>'"

我认为当html比较复杂时，你需要使用下面Shawn的答案

Answer 1

使用工具提示模板指令。

Controller :

$scope.fruits=["Bananas","Apples","Oranges"]

html:

<div ng-repeat="fruit in fruits">
    <div tooltip-template="'myTooltipTemplate.html'">TOOLTIP</div>
</div>

<script type="text/ng-template" id="myTooltipTemplate.html">
     <b>Fruit</b> : {{fruit}}
</script>

链接到plunkr:http://plnkr.co/edit/yUPl6hCACHKzvCBwrDUf?p=preview