Question

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

的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>

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

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

Answer 1

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

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

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

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

希望这对你有所帮助。

使用Zurb Foundation Interchange和AngularJS

1 个答案: