AngularJS: initialize ZURB Foundation JS

javascript angularjs zurb-foundation
Tyson Nero picture Tyson Nero · May 25, 2013 · Viewed 9.5k times · Source

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

Paul Mougel picture Paul Mougel · Jun 28, 2013

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.

Related questions

AngularJS: How to prevent "code flash" in page while loading

I have created a simple app using AngularJS. When I open the page for a second I see the screen below: However, after the load is complete I see the loaded and styled content which is fine: How do I …

Read More
Thoughts on using Zurb's Foundation+AngularJS?

I know this sounds like a pretty generic question, but I have already made a research and there is not much information out there, other than these two seem not to "play" very well together. I am referring to the …

Read More
"Thinking in AngularJS" if I have a jQuery background?

Suppose I'm familiar with developing client-side applications in jQuery, but now I'd like to start using AngularJS. Can you describe the paradigm shift that is necessary? Here are a few questions that might help you frame an answer: How do …

Read More