Rendering HTML tags that are inside a javascript object

I have a javascript object that I am displaying in an angularjs web app. The object is string characters with html tags "<h1></h1>"

and the "<p></p>"

problem is that when rendering on an html page, the tags are supposed to be rendered as normal html tags, but this is not the case. it rather shows raw tag characters.

This is what is displayed in the html page

<h1>My Article title</h1><p>My article content goes here</p>

      

This is what I expect to see

Title of my article

My Article content Goes here

Angular Code

          $scope.$apply(function(){                 
                $scope.eventsRaw = JSON.parse(data);
                $scope.eventDT = $scope.eventsRaw[0];
           })

      

HTML code

<div>
  {{eventDT.name}}
  {{eventDT.desc}}
</div>

      

How to render it correctly. the actual file is retrieved from the database.

Thank.

+3


source to share


1 answer


Using:

<span ng-bind-html="tagsString"></span>

      

https://docs.angularjs.org/api/ng/directive/ngBindHtml



Note: to use this, you must enable ngSanitize depending on your module.

In your code:

<div>
  <span ng-bind-html="eventDT.name"></span>
  <span ng-bind-html="eventDT.desc"></span>
</div>

      

+4


source







All Articles