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.
