Add support for children/transclusion

[bcherny]

See https://github.com/coatue-oss/react2angular/issues/11:

1. Mark the component as transclude: true
2. Compile transcluded children in the component's scope
3. Convert the compiled elements to JSX, and pass them to the component as children

For step 2, the $transclude service could be a good way to go.

Step 3 is where things get hairy. Ideally we would pass the DOM provided by $transclude through something like htmltojsx and into the React component. Alternatively we could pass in transcluded DOM via this.props or this.context, and make rendering it the consumer's responsibility.

[Sawtaytoes]

Is there a possibility of this getting merged in?

[bcherny]

Pinging @spirosikmd ^

[spirosikmd]

I don't have the time now to work on this. There is still the issue left with updating transcluding children after the scope is updated. Couldn't figure out a way to accomplish this.

[coreysnyder]

Is there any support for having transclusion with AngularJS components? I have a sidebar-wrapper that contains 2 components, one of which (<ui-view/>) isn't something I can re-write as a react-component.

<sidebar-wrapper>
    <project-branch-breadcrumb></project-branch-breadcrumb>
    <ui-view></ui-view>
</sidebar-wrapper>

I re-wrote project-branch-breadcrumb as a react component wrapped in an angular component using react-2-angular but I am not exactly sure how to do that for ui-view since it's a core angular element.

I'm getting this error angular.js:14328 Invariant Violation: Target container is not a DOM element.. Any advice on how to proceed? I can't really NOT use this sidebar-wrapper as it's a core part of our UI.

[tgfischer]

Is there any support for having transclusion with AngularJS components? I have a sidebar-wrapper that contains 2 components, one of which (<ui-view/>) isn't something I can re-write as a react-component.

<sidebar-wrapper>
    <project-branch-breadcrumb></project-branch-breadcrumb>
    <ui-view></ui-view>
</sidebar-wrapper>

I re-wrote project-branch-breadcrumb as a react component wrapped in an angular component using react-2-angular but I am not exactly sure how to do that for ui-view since it's a core angular element.

I'm getting this error angular.js:14328 Invariant Violation: Target container is not a DOM element.. Any advice on how to proceed? I can't really NOT use this sidebar-wrapper as it's a core part of our UI.

I'm also hoping to do something like this

[chiptus]

Is there any support for having transclusion with AngularJS components? I have a sidebar-wrapper that contains 2 components, one of which (<ui-view/>) isn't something I can re-write as a react-component.

<sidebar-wrapper>
    <project-branch-breadcrumb></project-branch-breadcrumb>
    <ui-view></ui-view>
</sidebar-wrapper>

I re-wrote project-branch-breadcrumb as a react component wrapped in an angular component using react-2-angular but I am not exactly sure how to do that for ui-view since it's a core angular element.

I'm getting this error angular.js:14328 Invariant Violation: Target container is not a DOM element.. Any advice on how to proceed? I can't really NOT use this sidebar-wrapper as it's a core part of our UI.

for ui-view look at ui-router/react-hybrid