diff --git a/ngReact.js b/ngReact.js index 0abd679..3d6696c 100644 --- a/ngReact.js +++ b/ngReact.js @@ -116,9 +116,14 @@ } // render React component, with scope[attrs.props] being passed in as the component props - function renderComponent(component, props, $timeout, elem) { + function renderComponent(component, props, $timeout, elem, scope, $compile, compile) { $timeout(function() { - React.render(React.createElement(component, props), elem[0]); + var rendered = React.render(React.createElement(component, props), elem[0]); + + if (compile) { + $compile(rendered.getDOMNode())(scope); + } + }); } @@ -141,18 +146,23 @@ // } // })); // - var reactComponent = function($timeout, $injector) { + var reactComponent = function($timeout, $injector, $compile) { return { restrict: 'E', replace: true, link: function(scope, elem, attrs) { + var prevScope; var reactComponent = getReactComponent(attrs.name, $injector); var renderMyComponent = function() { + var compile = true; + if (prevScope) { + compile = false; + } var scopeProps = scope.$eval(attrs.props); var props = applyFunctions(scopeProps, scope); - - renderComponent(reactComponent, props, $timeout, elem); + prevScope = scope; + renderComponent(reactComponent, props, $timeout, elem, prevScope, $compile, compile); }; // If there are props, re-render when they change @@ -195,12 +205,14 @@ // // // - var reactDirective = function($timeout, $injector) { + var reactDirective = function($timeout, $injector, $compile) { return function(reactComponentName, propNames, conf) { var directive = { restrict: 'E', replace: true, + terminal: true, link: function(scope, elem, attrs) { + var prevScope; var reactComponent = getReactComponent(reactComponentName, $injector); // if propNames is not defined, fall back to use the React component's propTypes if present @@ -208,11 +220,17 @@ // for each of the properties, get their scope value and set it to scope.props var renderMyComponent = function() { + var compile = true; + if (prevScope) { + compile = false; + } var props = {}; propNames.forEach(function(propName) { props[propName] = scope.$eval(attrs[propName]); }); - renderComponent(reactComponent, applyFunctions(props, scope), $timeout, elem); + + prevScope = scope; + renderComponent(reactComponent, applyFunctions(props, prevScope), $timeout, elem, prevScope, $compile, compile); }; // watch each property name and trigger an update whenever something changes, @@ -237,6 +255,6 @@ // create the end module without any dependencies, including reactComponent and reactDirective return angular.module('react', []) - .directive('reactComponent', ['$timeout', '$injector', reactComponent]) - .factory('reactDirective', ['$timeout','$injector', reactDirective]); + .directive('reactComponent', ['$timeout', '$injector', '$compile', reactComponent]) + .factory('reactDirective', ['$timeout','$injector', '$compile', reactDirective]); })); diff --git a/ngReact.min.js b/ngReact.min.js index 0f57e87..96eb4a6 100644 --- a/ngReact.min.js +++ b/ngReact.min.js @@ -1 +1 @@ -(function(n,t){"undefined"!=typeof module&&module.exports?module.exports=t(require("react"),require("angular")):"function"==typeof define&&define.amd?define(["react","angular"],function(e,angular){return n.ngReact=t(e,angular)}):n.ngReact=t(n.React,n.angular)})(this,function(React,angular){"use strict";function n(n,t){if(angular.isFunction(n))return n;if(!n)throw Error("ReactComponent name attribute must be specified");var e;try{e=t.get(n)}catch(r){}if(!e)try{e=n.split(".").reduce(function(n,t){return n[t]},window)}catch(r){}if(!e)throw Error("Cannot find react component "+n);return e}function t(n,t){if(n.wrappedInApply)return n;var e=function(){var e=arguments;return t.$apply(function(){return n.apply(null,e)})};return e.wrappedInApply=!0,e}function e(n,e){return Object.keys(n||{}).reduce(function(r,o){var c=n[o];return r[o]=angular.isFunction(c)?t(c,e):c,r},{})}function r(n,t,e,r){"collection"===n&&angular.isFunction(t.$watchCollection)?e.forEach(function(n){t.$watchCollection(n,r)}):"reference"===n?angular.isFunction(t.$watchGroup)?t.$watchGroup(e,r):e.forEach(function(n){t.$watch(n,r)}):e.forEach(function(n){t.$watch(n,r,!0)})}function o(n,t,e,r){e(function(){React.render(React.createElement(n,t),r[0])})}var c=function(t,c){return{restrict:"E",replace:!0,link:function(u,i,a){var f=n(a.name,c),p=function(){var n=u.$eval(a.props),r=e(n,u);o(f,r,t,i)};a.props?r(a.watchDepth,u,[a.props],p):p(),u.$on("$destroy",function(){React.unmountComponentAtNode(i[0])})}}},u=function(t,c){return function(u,i,a){var f={restrict:"E",replace:!0,link:function(a,f,p){var l=n(u,c);i=i||Object.keys(l.propTypes||{});var d=function(){var n={};i.forEach(function(t){n[t]=a.$eval(p[t])}),o(l,e(n,a),t,f)},s=i.map(function(n){return p[n]});r(p.watchDepth,a,s,d),d(),a.$on("$destroy",function(){React.unmountComponentAtNode(f[0])})}};return angular.extend(f,a)}};return angular.module("react",[]).directive("reactComponent",["$timeout","$injector",c]).factory("reactDirective",["$timeout","$injector",u])}); \ No newline at end of file +(function(n,t){"undefined"!=typeof module&&module.exports?module.exports=t(require("react"),require("angular")):"function"==typeof define&&define.amd?define(["react","angular"],function(e,angular){return n.ngReact=t(e,angular)}):n.ngReact=t(n.React,n.angular)})(this,function(React,angular){"use strict";function n(n,t){if(angular.isFunction(n))return n;if(!n)throw Error("ReactComponent name attribute must be specified");var e;try{e=t.get(n)}catch(r){}if(!e)try{e=n.split(".").reduce(function(n,t){return n[t]},window)}catch(r){}if(!e)throw Error("Cannot find react component "+n);return e}function t(n,t){if(n.wrappedInApply)return n;var e=function(){var e=arguments;return t.$apply(function(){return n.apply(null,e)})};return e.wrappedInApply=!0,e}function e(n,e){return Object.keys(n||{}).reduce(function(r,o){var c=n[o];return r[o]=angular.isFunction(c)?t(c,e):c,r},{})}function r(n,t,e,r){"collection"===n&&angular.isFunction(t.$watchCollection)?e.forEach(function(n){t.$watchCollection(n,r)}):"reference"===n?angular.isFunction(t.$watchGroup)?t.$watchGroup(e,r):e.forEach(function(n){t.$watch(n,r)}):e.forEach(function(n){t.$watch(n,r,!0)})}function o(n,t,e,r,o,c,i){e(function(){var e=React.render(React.createElement(n,t),r[0]);i&&c(e.getDOMNode())(o)})}var c=function(t,c,i){return{restrict:"E",replace:!0,link:function(u,a,f){var p,l=n(f.name,c),d=function(){var n=!0;p&&(n=!1);var r=u.$eval(f.props),c=e(r,u);p=u,o(l,c,t,a,p,i,n)};f.props?r(f.watchDepth,u,[f.props],d):d(),u.$on("$destroy",function(){React.unmountComponentAtNode(a[0])})}}},i=function(t,c,i){return function(u,a,f){var p={restrict:"E",replace:!0,terminal:!0,link:function(f,p,l){var d,m=n(u,c);a=a||Object.keys(m.propTypes||{});var s=function(){var n=!0;d&&(n=!1);var r={};a.forEach(function(n){r[n]=f.$eval(l[n])}),d=f,o(m,e(r,d),t,p,d,i,n)},h=a.map(function(n){return l[n]});r(l.watchDepth,f,h,s),s(),f.$on("$destroy",function(){React.unmountComponentAtNode(p[0])})}};return angular.extend(p,f)}};return angular.module("react",[]).directive("reactComponent",["$timeout","$injector","$compile",c]).factory("reactDirective",["$timeout","$injector","$compile",i])}); \ No newline at end of file