Angularjs importing html in templates

Question

I am very new to angular.js my task is to output html into a template, I have looked around and found a referencing $scope and $sanitize and using the ng-bind-html directive to get this done, none of this has worked for me.

I am wondering what the best approach for this is.

My data currently is coming from a JSON file with a content field containing html:

eg:

{
    "title:"thisTitle",
    "content":"`<h1>Hello world</h1>`"
}

The controller I have is very simple I am getting the resource via a $http.get

$http.get('/data/posts.json').success(function(data) {
    blog.posts = data;
});

My template is also very simple, for brevity this is similar.

<div ng-app="blog">
    <div ng-controller="BlogController as blog">
        <div>
            <h1>{{blog.post[0].title}}</h1>
            <div>{{blog.post[0].content}}</div>
        </div>
    </div>
</div>

Obviously this is all psudo code but my code follows pretty closely.

What I am looking for is a clear answer of how to implement html into templates in a simple way.

I have tried this method https://docs.angularjs.org/api/ng/directive/ngBindHtml among others, is there any way that will work for me?

Cheers, Any help is appreciated.

EDIT

examples below are real code

Main template

 <section id="content" ng-app="blog">
     <div ng-controller="BlogController as blog" id="blog" class="origin">
         <div class="pop">
             <div class="blog-listings">
                 <div class="post-section">
                     <p class="title">Featured posts</p>
                     <ul>
                         <post-listing ng-repeat="post in blog.posts | featuredPost"></post-listing>
                     </ul>
                 </div>

                 <div class="post-section">
                     <p class="title">Previous posts</p>
                     <ul>
                         <post-listing ng-repeat="post in blog.posts | previousPost"></post-listing>
                     </ul>
                 </div>
             </div>

             <post-item ng-repeat="post in blog.posts"></post-item>

         </div>
     </div>
 </section>

blog item template

<div ng-show="blog.isSelected($index)" class="blog-page-post">
    <div class="individualBlogPost">
        <h2>{{ post.title }}</h2>
        <div class="blogAvatar"></div>
        <p class="postDetails">
            <span class="name">{{ post.author }}</span><br>{{ post.date * 1000 | date:'EEEE MMM d y' }}
        </p>
        <div ng-bind-html="post.content" class="blogPostContent">
        </div>
        <img alt="" src="/img/blog/brush-line-784x7.png" class="brushStroke " />
    </div>
    <div class="blog-buttons">
        <a href="./blog-validation-full.html" class="blog-back">View all blog posts</a>
    </div>
</div>

blog controller

 (function() {

     var app = angular.module('blog', ['post-filters']);

    app.controller('BlogController', ['$scope', '$http', function($scope, $http) {
         var blog = this;

         this.posts = [];
         this.tab = 0;

         $http.get('/data/posts.json').success(function(data, status) {
             var first_featured = _.first(feHelpers.checkFeatured(data, true));

             blog.posts = data;
             this.tab = first_featured.id;
         });

         this.selectTab = function(setTab) {

             this.tab = setTab;
         }

         this.isSelected = function(checkTab) {
             return this.tab === checkTab;
         }
     } ]);

     app.directive('postListing', function() {
         return {
             restrict: 'E',
             templateUrl: 'ng-blog-listing.html'
         };
     });

     app.directive('postItem', function() {
         return {
             restrict: 'E',
             templateUrl: 'ng-blog-post-item.html'
         };
     });


 })();

The JSON resource

[
    {
        "id":0,
        "title":"post title 1",
        "date":"1425254400",
        "author":"use name a",
        "thumbnail":"/img/blog/blog-listing/blog-thumb-validation.png",
        "published":true,
        "featured":true,
        "content":"<h1>this is html</h1>"
    },
    {
        "id":1,
        "title":"post title 2",
        "date":"1421712000",
        "author":"user name b",
        "thumbnail":"/img/blog/blog-listing/blog-thumb-thumb.png",
        "published":true,
        "featured":true,
        "content":"<h1>this is html</h1>"
    }
]

If I am missing anything else let me know.

what output do you get when you use ng-bind-html? it should work, perhaps you can show the syntax you are using and the output that is wrong? — Claies
– Claies, Commented Mar 12, 2015 at 2:48
It could be the sanitize causing the issue - you might want to try if bypassing sanitize altogether helps: docs.angularjs.org/api/ng/service/… — Hari Pachuveetil
– Hari Pachuveetil, Commented Mar 12, 2015 at 2:50
That appears like it should work, and almost looks ripped from the official Angular documentation on the subject. Are you certain you aren't getting any errors in the console? — Claies
– Claies, Commented Mar 12, 2015 at 3:05
I didn't mean to imply anything wrong with being from the documentation, I was suggesting that if it worked for them, it should work for you.... I'd have to set up a plunker and toy around with it more, I don't see anything obviously wrong. — Claies
– Claies, Commented Mar 12, 2015 at 3:21

Community · Accepted Answer · 2017-05-23 10:33:44Z

3

The answer is $sce, not sure why but I found a post here: AngularJS : Insert HTML into view talking about a similar issue, if you include $sce as a dependency you can use the trustAsHtml method to reassign the html and it will allow it in the template.

$http.get('/data/posts.json').success(function(data, status) {
        var first_featured = _.first(feHelpers.checkFeatured(data, true));

        var newData = [];
        _.each(data, function(post){
            post.content = $sce.trustAsHtml(post.content);
            newData.push(post);
        });

        blog.posts = newData;
        this.tab = first_featured.id;
    });

Edit:

I have been looking into this more and found this blog post which helps explain this issue:

http://odetocode.com/blogs/scott/archive/2014/09/10/a-journey-with-trusted-html-in-angularjs.aspx

edited May 23, 2017 at 10:33

CommunityBot

11 silver badge

answered Mar 12, 2015 at 3:57

Daniel Tate

2,1634 gold badges26 silver badges53 bronze badges

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

Collectives™ on Stack Overflow

Angularjs importing html in templates

EDIT

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related