Reading JSON in AngularJS prints HTML tag as it is

Question

This is the JSFiddle file I am trying to get it work.

I have made a simple filter to change the \n newline character from JSON to <br> to give line break in the HTML, but it doesn't work as expected.

The question is: In the output <br> tag is displayed as it is instead of being rendered by browser as as line-break.

So far I have tried to make new filter with the $sce variable like

angular.module('myApp.filters', [])
  .filter('linebreak', function() {
    return function(text) {
        return text.replace(/\n/g, '<br>');
    }
})
.filter('to_trusted', ['$sce', function($sce){
            return function(text) {
                return $sce.trustAsHtml(text);
            };
        }]);

and pipe the filter in the ng-bind like:

<div ng-bind="data.para | linebreak | to_trusted"></div>

but this doesn't dolve the problem. any hints how to tell Browser that
is HTML and render it as line break, in this scenario?

NEOLPAR · Accepted Answer · 2014-05-21 11:50:57Z

4

When you use $sce in html you have to use the ng-bind-html directive instead of ng-bind:

<div ng-app="myApp">
    <div ng-controller="jsonCtrl">
        <div ng-repeat="data in textFile">
            <div ng-bind-html="data.para | linebreak | to_trusted">        </div>
      </div>
    </div>
</div>

You can see this working here

answered May 21, 2014 at 11:50

NEOLPAR

3821 silver badge6 bronze badges

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

1 Comment

user1376704 Over a year ago

The biggest thing I was missing was Dependency Injection in controller like controller('jsonCtrl', ['$scope','$sce', function($scope, $sce) { your fiddle help me understand lots of things. Many many thanks

Nitish Kumar · Accepted Answer · 2014-05-21 11:55:28Z

0

Use ng-bind-html for html binding.

Replace

ng-bind

To:

ng-bind-html

See Angular Docs For ngBindHtml

answered May 21, 2014 at 11:55

Nitish Kumar

4,8503 gold badges22 silver badges38 bronze badges

Collectives™ on Stack Overflow

Reading JSON in AngularJS prints HTML tag as it is

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related