search

angular-ui / bootstrap

PLEASE READ THE PROJECT STATUS BELOW. Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue!
http://angular-ui.github.io/bootstrap/
MIT License
14.27k stars 6.73k forks source link

Unable to use ng-transclude in Popovers #6286

Closed ryanechternacht closed 8 years ago

ryanechternacht commented 8 years ago

The issues forum is NOT for support requests. It is for bugs and feature requests only. Please read https://github.com/angular-ui/bootstrap/blob/master/CONTRIBUTING.md and search existing issues (both open and closed) prior to opening any new issue and ensure you follow the instructions therein.

Bug description:

I am trying to pass in transcluded content into a popover, and I'm unable to and throwing transclusion errors.

The goal is to create a "more-info" component that renders a small question-mark button that when clicked will show more info about something. I need to use this throghout the site, so I want an easy way to pass in arbitrary content. Transclusion seemed like the best way to handle this so that I can easily pass in appropriate, bindable content and render it as needed. However, this doesn't seem possible right now.

Link to minimally-working plunker that reproduces the issue:

https://plnkr.co/edit/fMrUeZQg6AAoBAMZPPBX?p=preview

Version of Angular, UIBS, and Bootstrap

up todate via plunkr

Angular: 1.5.8

UIBS: 2.1.3

Bootstrap: whatever plunkr uses?

ryanechternacht commented 8 years ago

In the plunkr, you can see a) the transcluded content is being passed/rendered by the demo-component element b) the popover is correctly rendering static content c) the transcluded content isn't being rendered in the popover and an error is being logged

wesleycho commented 8 years ago

This is an approach I would highly recommend against when using Angular, and a use case we do not support. The reason is that you created a directive that uses transclusion but attempts to slot the content inside another directive that uses transclusion but have that directive run first. Also this appears to be invalid, as you are using two <ng-transclude> tags.

ryanechternacht commented 8 years ago

@wesleycho Thanks for responding.

I guess I'm missing something, because this doesn't seem (to me) like a crazy use case. Take in some transcluded content, and render it on demand. Is there a better way to accomplish this?

The 2nd <ng-transclude> was to show that it works. You can take it out and see the same results.

wesleycho commented 8 years ago

Angular 1 unfortunately is not this flexible, so it is a design you want to avoid.

ryanechternacht commented 8 years ago

@wesleycho Just to be clear, the goal I'm after is the right use of transclusion, correct? The issue is trying to leverage the bootstrap to do it requires 2 levels of transclusion, and that's the problem. If I were to write my own popover and 'inline' it in my component, everything should be fine?

blowsie commented 7 years ago

I too thought this would be a reasonable approach.

@wesleycho what would be the recommended approach? @ryanechternacht did you come up with a solution?