Serve arbitrary html in angular data bind

68 views Asked by At

I'm making a blog, I have the skeleton in place I can serve up pages etc...

My question is in my main index.html page I have something like

<html ng-app="BlogApp">
...
<div ng-view></div>
</html>

My question is how do I put "rich" content in the ngView. A post in my blog is not formulaic enough to use the $scope for every feature. The structure of a post in my head is.

<h1>{{post.title}}</h1>
<p>{{post.date}}</p>
<div>{{post.content}}</div>

Where {{post.content}} is arbitrary html. I will have code snippets in <code>blocks</code> img tags, links, as well as text. Each post will use some subset of these and there is no enforced order.

I've seen that there is a way to have angular render raw html but this doesn't seem to be the angular way. What mechanism does angular supply to deal with this complexity?

The only other solution I can think of is create custom view's / controllers for every blog post.

1

There are 1 answers

1
Facundo Pedrazzini On BEST ANSWER

You have an angular directive for that:

<h1>{{post.title}}</h1>
<p>{{post.date}}</p>
<div ng-bind-html="post.content"></div>

Remember include ngSanitize to your module.

https://docs.angularjs.org/api/ng/directive/ngBindHtml