Menu icon Foundation
Foundation 5 and AngularJS integration

Hello,

I'm working for the first time with angularjs and foundation 5.

Things were working good, but I stomp in a "simple" problem.

Where is the best place to put $(document).foundation(); to boot all the components?

My index is built with some custom directives and a ng-view (routing).
Some foundation components, like dropdowns are located on the custom directives and others are locate inside the views that will be loaded on the ng-view.

If I use $timeout I can "fix" the problem...

For example, putting this function on my main model the problem disappears.
But the delay added on $timeout could be not enough on slow internet connections.

app.run(function ($timeout)
    {
        $timeout(function () 
        { 
            $(document).foundation({ offcanvas: { open_method: 'move', close_on_click: false } });

            console.log("foundation init on $timeout"); 
        }, 500);
    });

If I use something like:

app.run(function ($rootScope)
{
    $rootScope.$on('$routeChangeSuccess', function ()
    {
        $(document).foundation({ offcanvas: { open_method: 'move', close_on_click: false } });

        console.log("foundation init on $routeChangeSuccess");
    });
});
            

         

Components will work only after the view is loaded. If my custom directives load first than the content on ng-view, which is the case, the components inside the custom directives added directly on the index will not work.

I also found Angular Foundation http://pineconellc.github.io/angular-foundation/ but I´m afraid to rely on another "framework" that can be deprecated on future foundation or angular updates.

So... How can I integrate foundation with angularJS and cover all the situations?

thank you, for your time.

AngularJSFoundationcomponentsjavascriptinitangular

Hello,

I'm working for the first time with angularjs and foundation 5.

Things were working good, but I stomp in a "simple" problem.

Where is the best place to put $(document).foundation(); to boot all the components?

My index is built with some custom directives and a ng-view (routing).
Some foundation components, like dropdowns are located on the custom directives and others are locate inside the views that will be loaded on the ng-view.

If I use $timeout I can "fix" the problem...

For example, putting this function on my main model the problem disappears.
But the delay added on $timeout could be not enough on slow internet connections.

app.run(function ($timeout)
    {
        $timeout(function () 
        { 
            $(document).foundation({ offcanvas: { open_method: 'move', close_on_click: false } });

            console.log("foundation init on $timeout"); 
        }, 500);
    });

If I use something like:

app.run(function ($rootScope)
{
    $rootScope.$on('$routeChangeSuccess', function ()
    {
        $(document).foundation({ offcanvas: { open_method: 'move', close_on_click: false } });

        console.log("foundation init on $routeChangeSuccess");
    });
});
            

         

Components will work only after the view is loaded. If my custom directives load first than the content on ng-view, which is the case, the components inside the custom directives added directly on the index will not work.

I also found Angular Foundation http://pineconellc.github.io/angular-foundation/ but I´m afraid to rely on another "framework" that can be deprecated on future foundation or angular updates.

So... How can I integrate foundation with angularJS and cover all the situations?

thank you, for your time.

Hans McMurdy over 4 years ago

I'm not an angular expert but I've tried out the mean stack (bootstrap), angular-foundation and and currently testing out foundation Apps alpha (toying around with really).

To the best of my knowledge, angular-foundation doesn't fully support all of foundation's awesome components (as directives) as you could probably tell by reading their docs.

But from my limited experience with it their plunkers (http://plnkr.co/edit/?p=preview) and github pages branch really helped me get a basic mockup going pretty quickly. WIth that said, i would think it is closer to being "production ready" then the the foundation apps alpha (see the screen-cast I posted on your other forum post and decide for yourself).

Also you may want to check out this yeoman generator (barebones SCSS-styled, Foundation-frameworked, AngularJS-wired, PHP-infrastructued web app):
https://github.com/janbaykara/generator-spontaneous-combustion

So check out the those plunkers and if you still having problems make a new one and I'll see if I can help.

Hope that helps a little