Skip to content

Instantly share code, notes, and snippets.

@AprilArcus
Created May 26, 2015 16:28
Show Gist options
  • Save AprilArcus/9fc18ac3b7837d8fe3ff to your computer and use it in GitHub Desktop.
Save AprilArcus/9fc18ac3b7837d8fe3ff to your computer and use it in GitHub Desktop.
Angular Wrapper
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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment