HTML renderring

Author: Roy Sivan

assets/js/angular_app.js

@@ -1,5 +1,10 @@
 var reang;
 reang = angular.module('reang', ['ngResource'])
+.filter('to_trusted', ['$sce', function($sce) {
+	return function(text) {
+		return $sce.trustAsHtml(text);
+	};
+}])
 .factory('Posts', function($resource) {
 	return $resource(ajaxInfo.json_url + 'posts/:id', {
 		id: '@id'

assets/js/react_app.jsx

@@ -3,10 +3,11 @@ var $ = jQuery;
 
 var Post = React.createClass({
 	render: function(){
+		function post_content(html){ return {__html: html } }
 		return (
 			<article>
 				<h1>{this.props.post.title}</h1>
-				{this.props.post.content}
+				<div dangerouslySetInnerHTML={{__html: this.props.post.content}}></div>
 			</article>
 		)
 	}
@@ -22,14 +23,13 @@ var App = React.createClass({
 			dataType: 'json',
 			method: 'GET',
 			success: function(res){
-				console.log( res );
 				this.setState({data:res})
 			}.bind(this)
 		});	
 	},
 
 	getInitialState: function() {
-		return { data: [{ title: 'test'}] }
+		return { data: [{ title: 'test', content: '<p>test</p>'}] }
 	},
 
 	componentDidMount: function() {

build/js/react_app.js

@@ -7,6 +7,10 @@ var $ = jQuery;
 var Post = React.createClass({
   displayName: "Post",
   render: function () {
+    var post_content = function (html) {
+      return { __html: html };
+    };
+
     return React.createElement(
       "article",
       null,
@@ -15,7 +19,7 @@ var Post = React.createClass({
         null,
         this.props.post.title
       ),
-      this.props.post.content
+      React.createElement("div", { dangerouslySetInnerHTML: { __html: this.props.post.content } })
     );
   }
 });
@@ -32,14 +36,13 @@ var App = React.createClass({
       dataType: "json",
       method: "GET",
       success: (function (res) {
-        console.log(res);
         this.setState({ data: res });
       }).bind(this)
     });
   },
 
   getInitialState: function () {
-    return { data: [{ title: "test" }] };
+    return { data: [{ title: "test", content: "<p>test</p>" }] };
   },
 
   componentDidMount: function () {

build/js/scripts.js

@@ -1,5 +1,10 @@
 var reang;
 reang = angular.module('reang', ['ngResource'])
+.filter('to_trusted', ['$sce', function($sce) {
+	return function(text) {
+		return $sce.trustAsHtml(text);
+	};
+}])
 .factory('Posts', function($resource) {
 	return $resource(ajaxInfo.json_url + 'posts/:id', {
 		id: '@id'

index.php

@@ -6,7 +6,7 @@
 			Angular
 			<article ng-repeat="post in posts">
 				<h1>{{post.title}}</h1>
-				{{post.content}}
+				<div ng-bind-html="post.content | to_trusted"></div>
 			</article>
 		</div>
 		<div class="col-sm-6">