react and angular working together in directive

Author: Roy Sivan

assets/js/angular_app.js

@@ -14,4 +14,20 @@ reang = angular.module('reang', ['ngResource'])
 	Posts.query({}, function(res){
 		$scope.posts = res;
 	});
-}]);
+}])
+.directive('reactposts', function() {
+	return {
+		restrict: 'E',
+		scope: { data: '=', id: '@' },
+		link: function($scope,elm,attrs) {
+			$scope.$watch('data', function(n,o){
+				if( n && n.length ) {
+					React.render(
+						React.createElement(APP, {data:$scope.data}),
+						elm[0]
+					)
+				}
+			})
+		}
+	}
+});

assets/js/react_app.jsx

@@ -16,24 +16,10 @@ var Post = React.createClass({
 
 var App = React.createClass({
 
-	getposts: function() {
-		console.log('getting posts..');
-		$.ajax({
-			url: 'http://dclient.dev/wp-json/posts',
-			dataType: 'json',
-			method: 'GET',
-			success: function(res){
-				this.setState({data:res})
-			}.bind(this)
-		});	
-	},
-	
-	getInitialState: function() {
-		return { data: [{ title: 'test', content: '<p>test</p>'}] }
-	},
-	
-	componentWillMount: function() {
-		this.getposts();
+	componentWillReceiveProps: function( nextProps ) {
+		if(nextProps.data){
+			this.state.data = nextProps.data;
+		}	
 	},
 
 	render: function() { 
@@ -51,4 +37,4 @@ var App = React.createClass({
 	}
 });
 
-React.render(<App/>, document.getElementById( 'test_react' ) );
+//React.render(<App/>, document.getElementById( 'test_react' ) );

assets/js/react_app.jsx.backup

@@ -0,0 +1,54 @@
+var React = require('react');
+var $ = jQuery;
+
+var Post = React.createClass({
+	render: function(){
+		function post_content(html){ return {__html: html } }
+		return (
+			<article>
+				<h1>{this.props.post.title}</h1>
+				<div dangerouslySetInnerHTML={{__html: this.props.post.content}}></div>
+			</article>
+		)
+	}
+})
+
+
+var App = React.createClass({
+	
+	getposts: function() {
+		console.log('getting posts..');
+		$.ajax({
+			url: 'http://dclient.dev/wp-json/posts',
+			dataType: 'json',
+			method: 'GET',
+			success: function(res){
+				this.setState({data:res})
+			}.bind(this)
+		});	
+	},
+	
+	getInitialState: function() {
+		return { data: [{ title: 'test', content: '<p>test</p>'}] }
+	},
+	
+	componentWillMount: function() {
+		this.getposts();
+	},
+	
+	render: function() { 
+		if(this.state.data.length) {
+			return (
+				<div>
+					{this.state.data.map(function(post){
+						return (
+							<Post post={post}></Post>
+						)
+					})}
+				</div>
+			)
+		}
+	}
+});
+
+React.render(<App/>, document.getElementById( 'test_react' ) );