Angular Wrapper

gistfile1.txt

import React from 'react';
const Component = React.Component;
import angular from 'angular';
const jqLite = angular.element;

export default function(outerHTML) {

    class Wrapper extends Component {
        static displayName = `React wrapper around Angular fragment ${outerHTML}`;

        componentDidMount() {
            jqLite(document).ready( () => {
                // after https://docs.angularjs.org/api/ng/function/angular.injector
                jqLite(document).injector().invoke(['$compile', '$rootScope', ($compile, $rootScope) => {

                    const renderTarget = jqLite(outerHTML);

                    // store $scope and $directive as an ivar on the React component
                    // so that we can clean up after ourselves in componentWillUnmount
                    this.$scope = $rootScope.$new();
                    this.$directive = $compile(renderTarget)(this.$scope);

                    const appendTarget = React.findDOMNode(this.refs.appendTarget);
                    jqLite(appendTarget).append(this.$directive);

                }]);
            });
        }

        // delegate all rendering decisions to angular
        static shouldComponentUpdate = () => false;

        componentWillUnmount() {
            this.$scope.$destroy();
            this.$directive.remove();
        }

        render() {
            return <div ref="appendTarget"/>;
        }
    };

    return React.createElement(Wrapper);
}