[dialog/modal] Transclude issue with bootstrap 0.2

[ffesseler]

I've made a custom directive on top of ui bootstrap modal directive so I can use the same modal template everywhere in my app.

Please see this example :

http://plnkr.co/edit/2K0SRC?p=preview

It works well with bootstrap 0.1. However if I use bootstrap 0.2 instead, I get this error

TypeError: undefined is not a function

[pkozlowski-opensource]

@ffesseler Your plunker works fine for me (Chrome). I mean, I can open a modal, see the content without any errors in the console. What is the browser your are using?

Having said the above I would suggest looking at the $dialog service which allows you to specify your own template without a need for a custom directive.

[ffesseler]

Just to be sure ... the plunker uses UI bootsrap 0.1 by default so it's expected that the modal works when you open it. However, it will fail when you switch to 0.2.

I'll check that $dialog service, thanks

[ffesseler]

any update on this?

[petebacondarwin]

Hi @ffesseler
The modal directive is now sitting on top of the $dialog service. This service takes the html of the element as the template for the dialog but this loses it connection with the current compile process - in particular the any current transclude information.

So I am pretty sure that the transcluded content that you have created with your directive is being lost.

I think we may be able to fix this by allowing $dialog to take a transclude function as an alternative to a template. @pkozlowski-opensource, @SidhNor & @ajoslin - does this sound right?

[pkozlowski-opensource]

@petebacondarwin Actually the more I look into the modal & dialog code I more think that the "root of all evil" is here:
https://github.com/angular-ui/bootstrap/blob/master/src/dialog/dialog.js#L76

As of today we are creating DOM elements by hand and also switching "open" class in JavaScript code. I more and more think that we should create a template for this, sth like:
<div class="modal" ng-class="{modal-open: isOpen}">transclude content here</div>
and really on bindings to switch open / closed state.

IMO it would have following benefits:

• people could easily customize their templates by adding custom classes, ids or whatever else
• it would help us to create the foundation version of this directive

WDYT?

[pkozlowski-opensource]

@ffesseler we are going to cover this use case in the (hopefully near!) feature but as you can see we are trying to figure out the best API. You are second person that as for this feature so there is something here. But we want to make sure that we evolve in the right direction

In the mean time I would really, really encourage you to look into the $dialog service as it is far more flexible as compared to the directive. I was recently responding to the SO question where a person wanted to have reusable, custom modals and I my mind $dialog solution is more elegant. Have a look at it (it has working code example in plunk): http://stackoverflow.com/questions/15325526/angularui-messagebox-with-templateurl/15362245#15362245

Would be awesome if you could give it a try and let us know if this works for you. Also, would be great if you could share with us why you would prefer the modal \ custom directive over the $dialog service?

[ffesseler]

Actually, I've used the modal directive because I was not aware of that $dialog service :-)

In the mean time, looking at your plunker, creating a custom service wrapping the $dialog service won't solve my problem I think.

As a reminder, here is my use case :
Using a unique template for all modals in my application. Only the content will change and I don't want to duplicate the template markup.

If you look at my plunker, this is what I achieved. However, that worked with 0.1 and not any more with 0.2.
However, looking more closely at the $dialog service and examples you provided, handling modals with a service looks much better indeed. The API is elegant and it would remove a lot of boilerplate code I need to write when using the modal directive.
So basically, I need "the best" of both solutions : Having a single template that accepts transcluded content as well as a custom resolve and using the imperative $dialog service API.
Hope it was clear enough...

[pkozlowski-opensource]

It will be handled in #441

[ffesseler]

ah, fantastic!
I was waiting for this in order to upgrade from the 0.1 version

[shwetasingh]

Hi, I recently found out that '$dialog' is missing from Ui-bootstrap- 0.6.0 version. I know that I can potentially achieve the same functionality with $modal service. But I had started using $dialog a couple months back and baked it quite well into our application.

Is there a possibility to have $dialog back with the same functionality in future ui-bootstrap versions?

[pkozlowski-opensource]

@shwetasingh nope, we are not planning on adding back $dialog, it got replaced with $modal as $dialog had number of API / implementation issues. The library is a version 0.6.0 now so you need to expect API breaking changes, I'm affraid.

[shwetasingh]

@pkozlowski-opensource Thank you! I updated to version tpls-0.6.0. But we are still on Angular JS v1.0.7
Do you think both these are compatible as long as $modal is concerned?