AngularJs - html rendering

Question

We use elastic search highlighter and get the below code from the highlighter.

<span style='font-weight:bold;color:red;'>Baskar</span> Test

We display the result in html as follows.

                     <tr
                        ng-repeat="result in searchModelResult">                        
                        <td><p ng-bind-html="result.name"></p></td>                     
                    </tr>

I have included sanitize.js and have ngSanitize in the angular module. Still i dont see the html effect like red color font and bold font.

Am i missing anything here?

Thanks, Baskar.S

Facundo Pedrazzini · Accepted Answer · 2015-05-07 19:48:19Z

1

You need to do 2 things, first remove

{{result.name}}

as Daniel said... then you need to say to angular to trust in that html in your controller:

myApp.controller('MyCtrl', function ($scope, $sce) {
    $scope.result.name = $sce.trustAsHtml('<span style="font-weight:bold; color:red;">Baskar</span> Test');
});

You can see the full documentation of $sce here

If you need to iterate inside a ng-repeat you can create a filter:

myApp.filter('unsafe', function($sce) { return $sce.trustAsHtml; });

And then use it in the view:

<tr ng-repeat="result in searchModelResult">                        
    <td><p ng-bind-html="result.name | unsafe"></p></td>                     
</tr>

edited May 7, 2015 at 19:48

answered May 7, 2015 at 17:40

Facundo Pedrazzini

1,48614 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1578872 Over a year ago

Hi, I am getting a list and iterating using ng-repeat in the html. Should I iterate the list in the controller and add $sce.trustAsHtml for each element?

Facundo Pedrazzini Over a year ago

not necessarily, you can create a filter as Chris said in this link: stackoverflow.com/questions/18340872/… see the second answer (the one witch has 306 points). Tell me if you need an example.

Facundo Pedrazzini Over a year ago

@user1578872 I put an example on the answer.

Daniel Schaffer · Accepted Answer · 2015-05-07 17:15:24Z

0

You need to remove the second binding expression:

{{result.name}}

It looks like that is overriding the binding from ng-bind-html, and the default binding will HTML escape the string.

answered May 7, 2015 at 17:15

Daniel Schaffer

58.1k32 gold badges120 silver badges166 bronze badges

1 Comment

user1578872 Over a year ago

I tried this. Now, i dont see the html tags. But i dont see the html effect. Text color is still in normal color not in red and not in bold.

Collectives™ on Stack Overflow

AngularJs - html rendering

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related