ngBindHtml different result than $sce.parseAsHtml in template that uses angularUI

Question

Edit: Solution found! See bottom of question for explanation.

I have a directive sfNgFieldWrapper that contains a tooltip that I got from angularjUI ui-bootstrap.

The text of the tooltip is set with tooltip="{{ttpText}}".

The problem is that the text contains html entities and these entities are not translated to the correct character. I can't use ng-bind-html but I've checked and when I do use it on a span the text for the tooltip is correctly transformed. However, I can't use span and ng-bind-html since I need to use tooltip.

To fix this predicament I thought I would use $sce.pareAsHtml. The problem is that the html entities are not correctly transformed to characters!

I use it in my directive link function like so:

scope.ttpText = $sce.parseAsHtml(scope.ttpText);

Why doesn't parseAsHtml work while ng-bind-html does?

I can't put the parseAsHtml inside scope.$watch because that triggers a loop.

TrustAsHtml doesn't work either.

The tooltip function binds the content like so:

$document.find( 'body' ).append( tooltip );

Solution

After looking into the code of ui-bootstrap I started search stackoverflow specifically for it and I found a question with a similar issue and solution! Angular-ui tooltip with HTML

Stupid me could also just have checked the AngularUI guide: http://angular-ui.github.io/bootstrap/#/tooltip

The solution is simple, I can just add -html-unsafe after data-tooltip.

My directive has an isolated scope where my ttpText is defined as ttpText: '@'. — reaper_unique, Apr 29 '15 at 09:30
You need to share more code. Also, when I am asking how you add `ttpText` to the DOM, I am asking what function are you using: `.text()` or `.html()`? — Thomas Roch, Apr 29 '15 at 09:38
could you try `attrs.$observ(attrs.ttpText, function(n){ //changed value here})` — Pankaj Parkar, Apr 29 '15 at 09:51
I've added extra info and more code, and I will try what pankajparkar suggested. — reaper_unique, Apr 29 '15 at 09:57

score 1 · Accepted Answer · answered May 07 '15 at 07:58

Solution

I also updated the question for maximum visibility.

After looking into the code of ui-bootstrap I started search stackoverflow specifically for it and I found a question with a similar issue and solution! Angular-ui tooltip with HTML

Stupid me could also just have checked the AngularUI guide: http://angular-ui.github.io/bootstrap/#/tooltip

The solution is simple, I can just add -html-unsafe after data-tooltip.

ngBindHtml different result than $sce.parseAsHtml in template that uses angularUI

Solution

1 Answers1

Solution