HTML data get from $http GET is not showing properly in Angular.js

Question

I have defined a controller like this:

app.controller("home", function ($scope, $http, $common) {
    $http({
        method: "GET",
        url: '/posts/loadData'
    }).then(function (response) {
        //console.clear()
        if (typeof response.data.posts != 'undefined') {
            console.log(response.data.posts);
            $scope.posts = $common.arrangePosts(response.data.posts);
        }
    });
})

and a service to arrange data:

app.service('$common', function ($timeout, $sce, $httpParamSerializerJQLike) {
    var that = this;
    this.arrangePosts = function (rawPosts) {
        var posts = [];
        
        $.each(rawPosts, function (key, value) {
            posts.push({
                          postId: value.postId, 
                          postLink: '/post/' + that.cleanString(value.title) + '/' + value.postId, 
                          title: value.title, 
                          summary: $sce.trustAsHtml(value.summary)
                       });
        });

        return posts;
    }
});

using values in HTML like this:

<div class="widget fullwidth post-single">
        <h4 class="widget-title">Latest</h4>
        <div class="widget-content">
            <ul>
                <li ng-repeat="post in posts">
                    <h4 class="list-title"><a href="{{post.postLink}}">{{post.title}}</a></h4>
                    {{post.summary}}
                </li>
            </ul>
        </div>
    </div>

Data coming from server in JSON form:

Object { postId="4",  title="asdf",  summary="<p>asdf</p>"}

but all the HTML tags are printing on my page as it is (like a text) in summary.

In many SO posts people suggested to use $sce.trustAsHtml but it's not working for me. What can I try next?

Are you injecting html with angular stuff into the page? Maybe show an example of what the html looks like? — Yatrix
– Yatrix, Commented Apr 23, 2016 at 15:40

Hamed Mahdizadeh · Accepted Answer · 2016-04-23 15:50:57Z

1

have you tried this?

<div ng-bind-html='post.summary'></div>

answered Apr 23, 2016 at 15:50

Hamed Mahdizadeh

9751 gold badge17 silver badges35 bronze badges

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

3 Comments

Ritesh Over a year ago

This is working and i have implemented this on full post view page but here i don't want to include unnecessary elements. If there is another way u know for my current structure please tell.

Yatrix Over a year ago

@Ritesh you can use ngTransclude: docs.angularjs.org/api/ng/directive/ngTransclude

Ritesh Over a year ago

there is no other solution available except ng-bind-html. Thanks..!!

lufonius · Accepted Answer · 2016-04-23 16:41:34Z

0

You could solve this over a directive. Did you know, that you can use JQuery Lite inside AngularJS to manipulate the DOM?

Here a quick example:

angular.module("PostsDirective",[])
.directive("posts", function($sce){
return {
    link: function($scope, $element, $attrs){
        //the HTML you want to show 
        var post = "<div>hello world</div>";

        var posts = [post,post,post,post];

        //iterating through the list (_.each is a function from underscore.js)
        _.each(posts, function(element){
            //if you want to save the trusted html string in a var you can do this with getTrustedHtml
            //see the docs
            var safeHtml =  $sce.getTrustedHtml($sce.trustAsHtml(element));

            //and here you can use JQuery Lite. It appends the html string to the DOM
            //$element refers to the directive element in the DOM
            $element.append(safeHtml);
        });
    }
};
});

And the html

   <posts></posts>

This also pretty nice for the readability for your HTML code. And you can use it everywhere on your page.

BTW: As i can see, you get the HTML elements directly from a REST-Service. Why don't you get just the data and insert it into the ng-repeat? If you transfer all the HTML you get a pretty high overhead if you have loads of data.

answered Apr 23, 2016 at 16:41

lufonius

531 silver badge7 bronze badges

4 Comments

Ritesh Over a year ago

in my code am getting articles with proper formatting so how can anyone get this kind of data with html tags..??

lufonius Over a year ago

So you can't change the code on the server side to JSON because it's a external resource? I'm sorry, I don't know if I understood you right.

Ritesh Over a year ago

I have tried your suggestion and its throwing this error : Error: [$sce:itype] errors.angularjs.org/1.5.0-rc.2/$sce/itype?p0=html For your second comment, i can change code on server but my data are articles with proper formatting that's why i need to fetch data with html tags

Ritesh Over a year ago

i have updated question with JSON response. Please check..!!

Collectives™ on Stack Overflow

HTML data get from $http GET is not showing properly in Angular.js

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related