reusable directive

[tomasz stryjewski]

probably a noobish question, but how would one approach a reusable directive for modals?

what i'm trying to achieve is to have a "dynamic" content and a modal that i could invoke "externally" - from other controllers

---

sample use case:

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

modal.html

<section class="modal">
  <header>
    <h5 ng:if="title">{{ title }}</h5>
    <button class="close" ng:click="close()">&times;</button>
  </header>
  <div ng:transclude></div>
</section>

directive

app.directive('modal', function () {
  return {
    restrict    : 'E',
    templateUrl : 'modal.html',
    transclude  : true,
    replace     : true,
    // probably the missing part goes here?
  }
});

[Brian Ford]

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?

[tomasz stryjewski]

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? :)

[tomasz stryjewski]

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

[Brian Ford]

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.

[tomasz stryjewski]

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

[Brian Ford]

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

[tomasz stryjewski]

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 :)

[Brian Ford]

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.

[tomasz stryjewski]

sweet, thanks

[tomasz stryjewski]

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 🍻

[Brian Ford]

anytime :) 🍻