Parse HTML from JSON to ng-repeat
I started learning AngularJS today and I am doing well so far. But I ran into a problem and I cannot find an answer. I am trying to print html string <p>Text</p>
as formatted Text
. So far Angular is printing it as normal <p>Text</p>
.
My code looks like this:
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 it ng-bind-unsafe
, but it was removed. I also tried ng-bind-html="post.content"
it but it didn't work.
I am using Angular 1.4.
source to share
You are looking for ngBindHtml
. For example, with your content, you would use this:
<div ng-bind-html="post.content"></div>
Evaluates the expression and safely inserts the resulting HTML into the element. By default, the resulting HTML content will be sanitized using the $ sanitize service. To use this functionality, make sure $ sanitize is available, for example by enabling ngSanitize depending on your module (not in Angular core). To use ngSanitize in your module dependencies, you need to include "angular-sanitize.js" in your application.
source to share