AngularJS: initialize ZURB Foundation JS

Question

I am using both AngularJS and Foundation.

To initialize Foundation JS, you have to make the following call:

$(document).foundation();

What would be the best way to make this call in an AngularJS application? Code examples would be appreciated.

Also, if I were to write a directive around a Foundation JS component, how could I ensure that Foundation is initialized?

I'm not sure if this is of any use to you, but there's an AngularJS port of a bunch of Foundation's javascript parts now: pineconellc.github.io/angular-foundation/ — Stephan Muller, Sep 27 '14 at 00:14

score 38 · Answer 1 · answered Jun 28 '13 at 14:33

38

Here is my take, in app.js:

.run(function($rootScope) {
    $rootScope.$on('$viewContentLoaded', function () {
        $(document).foundation();
    });
});

which will re-initialize Foundation when a new view is loaded (so that the components contained in the new view are also initialized). This way, your controllers do not need to be aware of this.

answered Jun 28 '13 at 14:33

Paul Mougel

16,728
6
57
64

what about the concern raised in this answer? http://stackoverflow.com/questions/19623078/initializing-zurb-foundations-tooltip-with-angularjs – HaveAGuess Jun 26 '14 at 21:11

Dan · Accepted Answer · 2013-05-25T19:46:39.333

15

You could $apply the code in order to bring it into the Angular framework. Here is an example using $rootScope with run and this could also be done inside a controller/directive with any $scope:

app.run(function($rootScope){
    $rootScope.$apply($(document).foundation());
});

Another option::

$compile($(document).foundation())($scope);

Be sure to include the $compile service in your controller/directive to use it this way. E.g.:

app.directive('mydirective', function($compile) {
    return {
        link: function(scope, element, attrs) {
            $compile($(document).foundation())(scope);
        }
    }
});

edited May 25 '13 at 19:46

answered May 25 '13 at 19:28

Dan

59,490
13
101
110

1

Using the code example above with run doesn't seem to work. I confirmed using $compile in a controller will initialize Foundation as will simply calling '$(document).foundation();'. – Tyson Nero May 26 '13 at 20:28
1

Cool, that's what i was looking for, using foundation-6 – pkrawat1 Nov 22 '15 at 13:17

score 4 · Answer 3 · edited Oct 31 '14 at 11:41

4

There is a native angularJs support for foundation. Check out Angular Foundation.

Angular Foundation is a port of the AngularUI team's excellent angular-bootstrap project for use in the Foundation framework.

It has no dependencies but angular library itself and foundation CSS only.

edited Oct 31 '14 at 11:41

Graham Miln

2,724
3
33
33

answered Jul 06 '14 at 08:17

Muhammad Reda

26,379
14
93
105

I just `bower` installed `angular-foundation` and seems to work correctly. – Webdevotion Nov 10 '14 at 12:44
This library doesn't initialize the Javascript components by default (I'm on v0.3.1 - 2014-08-19) – Nigel Sheridan-Smith Nov 17 '14 at 00:16
You are correct, it doesn't. Instead it allows you to make use of almost all foundation javascript plugins. – Muhammad Reda Nov 17 '14 at 08:17
Link to Angular foundation is no longer active – brianc Oct 03 '20 at 04:44

score 3 · Answer 4 · answered Mar 19 '14 at 16:43

One method that I've been using is to just include a <script> tag at the end of my partial / template.

This way, I can target just the new content of each partial -- instead of making foundation js re-parse the whole DOM.

for example, in my header.html:

<header id="app-header">
  <h1>Logo</h1>
  <dl class="accordion" data-accordion>
    <dd>
      <a href="#panel1">Panel 1</a>
      <div id="panel1" class="content">
        Loren Ipsum blah blah blah....
      </div>
    </dd>
  </dl>
</header>

<!-- add this tag on bottom of template / partial -->
<script>$('#app-header').foundation();</script>

Especially if your app has a lot of DOM elements on the page, this can improve perfomance considerably.

granted, you usually want to avoid polluting your DOM with ` — jlee, Mar 19 '14 at 16:45

score 2 · Answer 5 · answered Dec 17 '13 at 07:46

2

Try the following code:

app.run(function($timeout){
    $timeout(function() {
        $(document).foundation();
    }, 500);
});

It solved my issue trying to get Foundation reveal working.

answered Dec 17 '13 at 07:46

Muhammad Reda

26,379
14
93
105

balazs630 · Answer 6 · 2017-10-12T12:53:34.207

For TypeScript Angular 4 (or 2) projects using Components:

According to the given blog post, declare $ as a variable in the component and then call $(document).foundation(); in ngOnInit() worked for me!

With Angular, components are injected into the DOM after Foundation has loaded. When you load up a new component, and inject it, Foundation doesn’t know it’s there. We need to tell Foundation to reinitialize and bind again, so these attributes will get wired up. http://justindavis.co/2017/06/15/using-foundation-6-in-angular-4/

{ import Component } from '@angular/core';

declare let $: any;      // TO ACCESS JQUERY '$' FUNCTION

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html'
  // other stuff here
});

export class MyComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    $(document).foundation();    // CALL foundation() INITIALIZATION FUNCTION FROM HERE
  }
}

AngularJS: initialize ZURB Foundation JS

6 Answers6

Linked