html-editor.directive.js

angular.module('app.common.directives.html-editor', [])

.directive('htmlEditor', function() {
  return {
    restrict: 'E',
    scope: {
      'html': '='
    },
    link: function (scope, element, attrs, ctrl) {
      // this is a browserify bundle where my react components live
      var HtmlEditor = require("app-common").HtmlEditor;
      
      // I have a single file with `module.exports = window.React; delete window.React;` aliased as 'react'
      var React = require('react');

      // give our component a home
      var angularElement = angular.element("<div></div>");
      element.append(angularElement);
      var reactElement = angularElement[0];

      // HtmlEditor is created with React.createClass, so we're just passing in some props
      var component = HtmlEditor({
        html: scope.html,
        onChange: function(e, html){
          // tell angular we changed something
          scope.html = html;
          scope.$apply();
        }
      });

      // work with angular to manage the life cycle of our component
      React.renderComponent(component, reactElement);

      // clean up, our componentWillUnmount calls and everyone's happy
      scope.$on("$destroy", function(){
        React.unmountComponentAtNode(reactElement);
      });
    }
  }
});