Menu
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>
601
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>
);
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
