Geek Answers Handbook

Use custom Angular directive from React

I am trying to implement an Angular ng-repeat replacement "fast repeat" template with React rendering. I can display the main table, but the table will have to support Angular custom directives. I can get custom directives for rendering in React (as attributes), but they do not work. Based on Mr. Google, this should be possible, but it seems to me that maybe I need to compile using HTML code generated using React that contains my custom directives ... or not.

Here is my test code. The reaction-test directive seems to correctly display ReactClass components, which includes the "ng-monkey" attribute, which itself is a custom Angular directive. The monkey does not seem to work. Any suggestions?

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Angular React Test</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1.0" name="viewport" /> </head> <body ng-app="AngularReactTest" ng-controller="TestController"> <react-test monkey></react-test> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"> </script> <script src="https://fb.me/react-0.13.3.js"></script> <script> var ReactClass = React.createClass({ displayName: 'ReactClass', render: function () { return ( React.DOM.div({ 'data-ng-monkey': '' }, null) ) } }); angular .module('AngularReactTest', []) .controller('TestController', [function () { }]) .directive('reactTest', function () { return { restrict: 'E', link: function (scope, el, attrs) { var test = React.createElement(ReactClass, null, null); React.render(test, el[0], null); } } }) .directive('ngMonkey', function () { return { restrict: 'A', link: function (scope, el, attrs) { alert('In ngMonkey link function...making my head hurt...'); }, } }); </script> </body> </html>

These are the rendering results:

 <ReactTest> <div data-ng-monkey></div> </ReactTest>
+5
source share
1 answer

I know this old topic, but I think this solution can help someone

 React.createClass({ compileDirective: function () { $compile(this.refs.monkey)($scope); }, componentDidMount: function () { this.compileDirective(); }, componentDidUpdate: function () { this.compileDirective(); }, render: function () { return ( <div> <monkey ref="monkey"></monkey> </div> ); } });
+1
source

More articles:


All Articles