reusable directive about angular-modal HOT 11 CLOSED

Why do you want to use a directive for this? What meaning does it have for a <modal> to be within some position in the DOM?

from angular-modal.

scenario:

i have a "page" on which i want to display few different forms in a modal window and use their results on this page

also, i want to use the modal windows as a replacement for window.confirm(), window.prompt() and window.alert() but the messages should reside outside of JS itself - in HTML, so their content could differ

or is my approach a bad idea in general? :)

from angular-modal.

having it in some position in the DOM would be only initial - ideally, the directive would take it "out" of the DOM transcluding the content and making it "Ready to use" as needed, so

<modal ng:controller="alertModal">
  hi there! I'm {{ name }}
</modal>

would be, ideally, available via alertModal.activate({ name: 'foo' }); somewhere within a page controller

from angular-modal.

Why not have the HTML for the modal in a separate HTML file rather than meaninglessly nested on the page?

From everything you said, it makes more sense for the modal to be a service than a directive.

from angular-modal.

that's the problem - html could be different for every possible situation
different alerts, different prompts, different content - like a whole form etc

i want dont want to end up with 20 different services for modals

from angular-modal.

But you're okay with having a directive used 20 different times? How is that any better?

from angular-modal.

well, that's actually my question - is it better to have 20 services for each possible scenario or have one "flexible" directive?

sorry if i'm poking around a really obvious solution - new to angular and trying different approaches to see what works best :)

from angular-modal.

20 services for each possible scenario or have one "flexible" directive

This is a false dichotomy. You could have one "flexible" service or 20 different directives. If you want to parameterize templates, you can use locals and ng-include. There are many ways to reduce duplicated code with the service approach, if that's your concern.

I'd encourage you to think critically about the architecture of your app, especially with regards to what it means to be a service versus a directive. I suspect your proposed solution will be cumbersome to test, for instance.

Try the service-based approach. If you run into a problem with it, post a jsfiddle or plunkr and we can walk through it.

from angular-modal.

sweet, thanks

from angular-modal.

you were right - ended up with 6 services in total (for now) and it's all good

thanks for your time spent on explaining it to me - much appreciated 🍻

from angular-modal.

anytime :) 🍻

from angular-modal.