Serve arbitrary html in angular data bind

Question

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.

Facundo Pedrazzini · Accepted Answer · 2015-06-09 03:02:55Z

1

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

answered Jun 9, 2015 at 3:02

Facundo Pedrazzini

1,48614 silver badges22 bronze badges

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

1 Comment

Facundo Pedrazzini Over a year ago

It's the way to do this... also the directives in the html goes with Hyphens, and no CamelCase (ng-view/ng-app instead of ngView/ngApp)

Collectives™ on Stack Overflow

Serve arbitrary html in angular data bind

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related