Is there a way to transclude something into an Ion Modal?

ionic-v1
1

Hi,

i am looking for a way to create a custom directive, that transcludes its content into a section to an ion modal.

Something like:

<my-custom-modal>
    <h1>foo</h1>
    <p>bar</p>
</my-custom-modal>

should transclude its content inside an Ionic Modal in another custom directive p.e.:

<ion-modal-view>
    <ion-header-bar>
      <h1 class="title">My Modal title</h1>
    </ion-header-bar>
    <ion-content>
      <my-custom-modal-body></my-custom-modal-body>
    </ion-content>
  </ion-modal-view>

Has somebody an idea, if something like this is possible?
I would like to work with a lot of modals, and all are similar and i would not make dozens of templates, but modal-templates with some dynamic areas.

Maybe i have the wrong idea, to create something like this. What could be the best way to create Modal-Templates with dynamic areas?

Best Reagards,
Thomas

2

There is something called Angular transclude that you can use in a custom directive which may suit your purposes. It will allow you to mark a contextual insertion point within content. The following link shows ngTranclude using a directive.

https://docs.angularjs.org/api/ng/directive/ngTransclude

Does this help?

~ Brad

3

This standard angular procedure is exactly what i like to do with the ionic modals too, but with modals, it doesnt work this way…

The Modal Service has its own Template, and <ng-transclude> just works inside the template of a directive, or in some childs of the directive. But <ion-modal-view> could not be a child of my custom directive, cause it is created by a service an is injected to document body.

Following this, an error raises, if i use the <ng-transclude> inside the Modal Template:

Illegal use of ngTransclude directive in the template!
No parent directive that requires a transclusion found.

So what you have found, is exactly what I try to do, but i need a way, that works with Ionic Modals together, or another way / workaround, that gives me similar possibilities.

Thank you an best Regards,
Thomas

1 Like
4

Hmm… interesting situation. I have used ngTransclude a few times on projects but am not a transclude expert by any means. I have found the following on StackOverflow as to why ngTransclude throws this error, which includes some workarounds. Also, apparently as of Angular 1.2.6, ngTransclude will be deprecated (if I read it correctly) in favour of another way of doing this. I hope this helps.

~ Brad

5

Thank you.

I think, the main problem is, that i have no possibility to set transclude: true in the <ion-modal-view> directive… That were a nice feature, if i could do this in the configuration of the $ionicModal service. Something like: templateTransclusion: true or something similar.

I think i have to handle this with ngBindHtml…
https://docs.angularjs.org/api/ng/directive/ngBindHtml

But i find, that this is a real ugly solution… I would be happy, if somebody had a better idea, how i could dynamically insert HTML inside an Ion Modal.

Thanks a lot and best Regards,
Thomas