i am looking for a way to create a custom directive, that transcludes its content into a section to an ion modal.
should transclude its content inside an Ionic Modal in another custom directive p.e.:
<h1 class="title">My Modal title</h1>
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?
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.
Does this help?
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,
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.
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…
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,