使用Zurb Foundation Interchange和AngularJS

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:

我正在开发一个使用Zurb Foundation作为其CSS框架的AngularJS项目。我试图弄清楚如何在AngularJS视图的上下文中使用Foundation的数据交换。这甚至可能,我似乎无法让它工作。这就是我目前所拥有的:

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.

当我加载我的应用程序时,我可以看到“测试交换”。但是,未显示基于屏幕大小的内容(phone.html,portrait.html,landscape.html)。 Phone.html,Portrait.html和landscape.html只在DIV元素中包含有效说明“手机”,“肖像”和“风景”的文字。

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

有没有办法在AngularJS ng-view中利用Foundation的数据交换内容?如果是这样,怎么样?谢谢

1 个解决方案

#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.

这里的要点是Zurb的数据交换功能在DOMContentLoad事件上运行,而AngularJS视图的负载是异步的。所以,事件已经发生了。

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.

要克服这个问题,你需要使用$(document).foundation('interchange','reflow')手动触发数据交换;或$(document).foundation('reflow');回流所有组件。

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

要在正确的位置触发此操作,您需要在AngularJS路由系统上侦听名为$ routeChangeSuccess的特殊事件。像这样的东西:

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

Hope this help you.

希望这对你有所帮助。

#1