add content to uib-tooltip-html

Question

Why does this work just fine:

Controller:

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

View:

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

But the following doesn't work at all? ;-(

Controller:

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

View:

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

Error message is: angular.min.js:6 Uncaught Error: [$rootScope:infdig]

---

Edit 1: Thank you, original problem solved. But now I have another question on this one. What if the <div> is within a ngRepeat and I want to give the function an item of ngRepeat as an argument? Like <div uib-tooltip-html="getHtml({{item}})">Test</div> ?

---

Edit 2: Here is a more specific example of my problem. I want something like this to work:

<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>

with

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

But it doesn't work. When I use uib-tooltip instead of uib-tooltip-html I can see the tooltip with the correct html (unparsed) in it, but if I change it to uib-tooltip-html there's the error again.

Answer 1

In the first case $scope.getHtml ends up to be a string .

In the second case $scope.getHtml ends up to be a function , which returns the same string as the first case.

However if you call your function in the second case, it would work, as it is essentially the same code:

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

if you want to pass the html data in ng-repeat, just do this:

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

and use it by:

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