Geek Answers Handbook

Using Zurb Foundation Interchange with AngularJS

I am working on an AngularJS project that uses the Zurb Foundation as a CSS framework. I am trying to understand how to use data exchange in the context of AngularJS view. Is it possible, I can not get it to work. This is what I have now:

index.html

<!DOCTYPE html> <html ng-app='app' xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="foundation/normalize.css" /> <link rel="stylesheet" href="foundation/foundation.min.css" /> <link rel="stylesheet" href="app.css" /> </head> <body> <div id="view" ng-view></div> <script type="text/javascript" src="jquery/2.0.3/jquery.min.js"></script> <script type="text/javascript" src="foundation/foundation.min.js"></script> <script type="text/javascript" src="angularjs/1.2.7/angular.min.js"></script> <script type="text/javascript" src="angularjs/1.2.7/angular-route.min.js"></script> <script type="text/javascript" src="app.js"></script> </body> </html>

app.js

 angular.module('app', ['ngRoute']) .config(function ($routeProvider, $locationProvider) { $locationProvider.html5Mode(true); $routeProvider .otherwise({ templateUrl: '/views/interchange.html', controller: myCtrl }); }) .run(function ($rootScope, $location) { $rootScope.$on('$viewContentLoaded', function () { $(document).foundation(); }); }) ; function myCtrl() { console.log('loading controller'); }

interchange.html

 <article> testing interchange <div data-interchange="[phone.html, (small)], [portrait.html, (medium)], [landscape.html, (large)]"></div> </article>

When I download my application, I see a “test exchange”. However, content (phone.html, portrait.html, landscape.html) based on screen size is not displayed. Phone.html, Portrait.html, and landscape.html have only text inside DIV elements that effectively say Phone, Portrait, and Landscape.

Is there a way to use Foundation data exchange material inside AngularJS ng-view? If so, how? thank you

+6
source share
1 answer

The main thing here is that the Zurb communication function works in the DOMContentLoad event, and loading AngularJS views is asynchronous. So, the event has already happened.

To deal with this, you need to initiate a data exchange manually using $ (document) .foundation ('interchange', 'reflow'); or $ (document) .foundation ('reflow'); to melt all components.

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

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

Hope this helps you.

+13
source

More articles:


All Articles