How to deal with $(document).foundation() call and WebPack?

Question

According to the Foundation's documentation:

After you have included the Foundation JavaScript, just add a simple call to initialize all plugins on your page.

We recommend that you initialize Foundation at the end of the page .

<script>
  $(document).foundation();
</script>

My app uses WebPack and therefore modules loads are async.
It means that the classical script at the bottom of the body runs BEFORE a ui-view is populated with a template. (using Angular).

If I put the script at the bottom, the DOM is populated before being parsed by Foundation's scripts, resulting in no effect at all of Foundation's components's behaviour.

Have you experienced the same?

I don't want to trigger $(document).foundation(); in each controller's template.

Answer 1

You should execute $(document).foundation() on document.ready event or window.load. But the best solution is to module wise initiate the Foundation JS.

For example, creating an accordion var elem = new Foundation.Accordion(element, options);