Using Zurb Foundation Interchange with AngularJS

StackOverflow https://stackoverflow.com//questions/21019132

  •  21-12-2019
  •  | 
  •  

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 an AngularJS view. Is this even possible, I can't seem to get it to work. This is what I currently have:

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 load my app, I can see 'testing interchange'. However, the content (phone.html, portrait.html, landscape.html) based on the size of the screen is not shown. Phone.html, Portrait.html, and landscape.html just have text inside DIV elements that say 'Phone', 'Portrait', and 'Landscape' effectively.

Is there a way to leverage Foundation's data interchange stuff inside of a AngularJS ng-view? If so, how? Thank you

Was it helpful?

Solution

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top