Parse HTML from JSON in ng-repeat

Question

I started to learn AngularJS today and so far I am doing well. But I encountered a problem and I can't seem to find an answer. What I'm trying to do is to print html string <p>Text</p> as formatted Text. So far Angular prints it as plain <p>Text</p>.

My code is as follows:

JS

var blogApp = angular.module('blogApp', []);

blogApp.controller('blogPostsCtrl', function($scope, $http) {
    $http.get('wp-json/posts').success(function(data) {
        $scope.posts = data;
        $scope.postsLoaded = 'visible-lg';
    });
});

HTML

<article id="post-{{post.ID}}" <?php post_class(); ?> itemscope itemprop="blogPost" itemtype="http://schema.org/BlogPosting" ng-repeat="post in posts" ng-class="postsLoaded">

    <h2 class="entry-title" itemprop="headline"><a title="Link do {{post.title}}" rel="bookmark" href="{{post.link}}">{{post.title}}</a></h2>

    <div class="entry-content">
        <img ng-src="{{post.featured_image.source}}">
        {{post.content}}
    </div>
    <footer class="entry-footer">
        <ul class="categories"><li ng-repeat="category in post.terms.category"><a href="{{category.link}}">{{category.name}}</a></li></ul>
    </footer>
</article>

My problem is with {{post.content}}. I wanted to try ng-bind-unsafe, but it was removed. I also tried ng-bind-html="post.content", but it didn't work.

I am using Angular 1.4.

Answer 1

You are looking for ngBindHtml. For example with your content you'd use this:

<div ng-bind-html="post.content"></div>

Evaluates the expression and inserts the resulting HTML into the element in a secure way. By default, the resulting HTML content will be sanitized using the $sanitize service. To utilize this functionality, ensure that $sanitize is available, for example, by including ngSanitize in your module's dependencies (not in core Angular). In order to use ngSanitize in your module's dependencies, you need to include "angular-sanitize.js" in your application.