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?

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

Try the following code:

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

It solved my issue trying to get Foundation reveal working.

Answer 6

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
  }
}