search

coatue-oss / react2angular

The easiest way to embed React components in Angular 1 apps.
Other
544 stars 109 forks source link

Add support for children/transclusion #12

Open bcherny opened 7 years ago

bcherny commented 7 years ago

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 commented 6 years ago

Is there a possibility of this getting merged in?

bcherny commented 6 years ago

Pinging @spirosikmd ^

spirosikmd commented 6 years ago

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 commented 6 years ago

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 commented 4 years ago

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 commented 2 years ago

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