Using Zurb Foundation Interchange with AngularJS

Question

I\'m working on an AngularJS project that uses Zurb Foundation as its CSS framework. I\'m trying to figure out how to using Foundation\'s data interchange within the context of

Answer 1

The main point here is that the data-interchange feature of Zurb runs on DOMContentLoad event, and the load of AngularJS' views is async. So, the event already happened.

To get over this, you need to trigger the data-interchange manually using $(document).foundation('interchange', 'reflow'); or $(document).foundation('reflow'); to reflow all components.

To trigger this on the right place, you need to listen to a special event on AngularJS routing system called $routeChangeSuccess. Something like this:

module.run(function ($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function () {
        $(document).foundation('reflow');
    });
});

Hope this help you.