AngularJS : ng-bind-html inside a uib-tooltip-html

Question

I have to show a tooltip in my UI. I am using angularjs in UI side.

Please see the code below.

<i class="fa fa-info-circle f18 darkgray hover pointer" uib-tooltip-html="'<div class=fw-600>Reason:</div>"+obj.comments+"'" tooltip-class="white-blue-tooltip"></i>

But I am getting error when the value of obj.comments = Canceled via 'View Group' . Please see the error below.

Error: [$parse:syntax] Syntax Error: Token 'View' is an unexpected token at column 49 of the expression ['<div class=fw-600>Reason:</div>cancelling via 'View Group''] starting at [View Group''].

This is because of the single quote present in the value (Canceled via 'View Group').

In order to solve this I have used ng-Sanitize as described in the following link https://www.w3schools.com/angular/ng_ng-bind-html.asp

Now my code look like below

<i class="fa fa-info-circle f18 darkgray hover pointer" uib-tooltip-html="'<div class=fw-600>Reason:</div> ng-bind-html="+obj.comments+"'" tooltip-class="white-blue-tooltip"></i>

But I am getting output like

Reason: 
ng-bind-html=Canceled via 'View Group'

I have added 'ngSanitize' in my controller and loaded the angular.min.js and angular-sanitize.js in the page, is there anything missing here.

Appreciates any help.

Answer 1

You have to use $sce service. Please look into following link.

Angularjs Sce