6

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.

Mik378
  • 21,881
  • 15
  • 82
  • 180
  • http://stackoverflow.com/a/17367185/985949 I tried this and it works, but is there a better solution? – Mik378 Jan 26 '16 at 13:32

1 Answers1

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

Jeffrey de Graaf
  • 479
  • 3
  • 17
  • Hello @Jeffrey, I was wondering if you would still recommend this approach in 2018, using foundation-sites 6 + Angular 6 – Neph Aug 01 '18 at 17:13
  • I'd that say that loading everything vs loading per-module is performance optimization. Regardless, both need to be executed _when DOM is ready_ otherwise it won't work. – Alexander Kucheryuk May 14 '21 at 00:22