Use custom Angular directive from within React

Question

I am attempting to implement the "fast repeat" pattern of replacing Angular ng-repeat with a React rendering. I can render a basic table, but the table will need to support custom Angular directives. I can get the custom directives to render in React (as attributes), but they don't work. Based on Mr. Google this should be possible, but it seems to me that perhaps I need to do a $compile on the React rendered HTML that contains my custom directives...or not.

Here is my stripped down test code. The 'react-test' directive seems to correctly render the ReactClass components, which includes a 'ng-monkey' attribute which itself is an Angular custom directive. 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>

This is the rendering results:

<ReactTest>
    <div data-ng-monkey></div>
</ReactTest>

Unfortunately no. We soon discovered that our performance problem was not the nature of ng-repeat but issues with IE and Angular Material Design library. So we dropped Angular Material Design. Sorry, I hope you find a resolution. — programmerj
– programmerj, Commented Oct 30, 2015 at 11:15

Bartosz · Accepted Answer · 2016-09-29 14:14:41Z

1

I know it's old subject, 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>
                    );
                }
            });

answered Sep 29, 2016 at 14:14

Bartosz

131 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Use custom Angular directive from within React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related