Angularjs html tag is showing

Question

I am trying to add the following code.

$scope.journals = [
   {title: "Journal", content: "This is content <br>"}
]

The HTML that I have is:

<div ng-repeat="journal in journals">
   <h1>{{journal.title}}</h1>
   <span>{{journal.content}}</span>
</div>

However the "br" Tag is showing as just plain text and not html. How can I fix that?

possible duplicate of [AngularJS: Insert HTML from a string](http://stackoverflow.com/questions/14761724/angularjs-insert-html-from-a-string) — Phil, Apr 29 '14 at 00:45

score 1 · Accepted Answer · answered Apr 29 '14 at 01:24

if you don't want to mess with $sce and you just want to get er done:

lrApp.directive('bindHtml', function () {
return {
    restrict: 'A',
    link: function (scope, elem, attrs) {
        scope.$watch(attrs.bindHtml,function(nv,ov){
            elem.html(nv);
        });
    }
};
});

score 0 · Answer 2 · answered Apr 29 '14 at 01:08

Not sure if this can work for you but you can use a combination of ng-bind-html with $sce.trustAsHtml() to mark your content as trusted. Note that you'll only want to do this if you can truly consider the content as safe.

Here's a plunk as an example:

http://plnkr.co/edit/L51T4OxdF8AFF5lRQdQW

Here's the $sce documentation. Worth a read IMHO to understand the impact of trustAs.

https://docs.angularjs.org/api/ng/service/$sce

score 0 · Answer 3 · answered Nov 24 '14 at 11:25

0

You just need to use ng-bind-html directive, provided by angularjs

<span ng-bind-html="journal.content"></span>

answered Nov 24 '14 at 11:25

Sericaia

450
3
15

Angularjs html tag is showing

3 Answers3