向ubb -tooltip-html添加内容

add content to uib-tooltip-html

本文关键字：添加 -tooltip-html ubb      更新时间：2023-09-26

为什么可以正常工作:

控制器:

$scope.getHtml = $sce.trustAsHtml("<div>Test</div>");

视图:

<div uib-tooltip-html="getHtml">Test</div>

但以下内容根本不起作用?; (

控制器:

$scope.getHtml = function (){
        var textOutput = "<div>Text</div>";
        return $sce.trustAsHtml(textOutput);        
    };

视图:

<div uib-tooltip-html="getHtml()">Test</div>

错误信息是:angular.min.js:6 Uncaught Error: [$rootScope:infdig]

编辑1:谢谢，原来的问题解决了。但现在我有另一个问题。如果<div>在一个ngRepeat中，我想给这个函数一个ngRepeat的项作为参数呢?像<div uib-tooltip-html="getHtml({{item}})">Test</div> ?
编辑2:这是我的问题的一个更具体的例子。我想要这样的工作: 
<tr ng-repeat="object in objectArray">
    <td uib-tooltip-html="getHtml(object.value1)">{{object.value1}}<td>
    <td uib-tooltip-html="getHtml(object.value2)">{{object.value2}}<td>
    <td uib-tooltip-html="getHtml(object.value3)">{{object.value3}}<td>
</tr>


$scope.getHtml = function (value) {
    var textOutput = doSomethingWithObjectDataAndCreateHtmlFromIt(value);
    return $sce.trustAsHtml(textOutput);        
}

但是它不起作用。当我使用uib-tooltip而不是uib-tooltip-html时，我可以看到其中有正确的html(未解析)的工具提示，但如果我将其更改为uib-tooltip-html，则再次出现错误。

在第一个情况下，$scope.getHtml最终是字符串。

在第二个情况下，$scope.getHtml最终成为函数，返回与第一个情况相同的字符串。

然而，如果你在第二种情况下调用你的函数，它将工作，因为它本质上是相同的代码:

$scope.getHtml = function () {
    var textOutput = "<div>Text</div>";
    return $sce.trustAsHtml(textOutput);        
} ()

如果你想在ng-repeat中传递HTML数据，只需这样做:

$scope.getHtml = function (html) {
    return $sce.trustAsHtml(html);        
}

并使用

<div uib-tooltip-html="getHtml()">Test</div>
相关文章：