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

Question

According to the documentation:

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

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

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

My application uses WebPack, therefore loading async modules.
This means that the classic script at the bottom of the body works before the ui-view populated with a template. (using Angular).

If I put the script at the bottom, the DOM is populated before analyzing the Foundation scripts, which will not affect the behavior of the Foundation components.

Have you experienced the same thing?

I do not want to run $(document).foundation(); in each controller template.

Answer 1

You must execute $(document).foundation() in the document.ready event or window.load . But the best solution is modular wise to initiate Foundation JS.

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