使用Zurb基金会与AngularJS互通我正在研究一个使用ZURB基金会作为CSS框架的angurjs项目。我试图弄清楚如何在AngularJS视图的上下文中使用Foundation。这可能吗，我似乎无法让它工作。这就是我目前拥有的：_Angularjs_Zurb Foundation

使用Zurb基金会与AngularJS互通我正在研究一个使用ZURB基金会作为CSS框架的angurjs项目。我试图弄清楚如何在AngularJS视图的上下文中使用Foundation。这可能吗，我似乎无法让它工作。这就是我目前拥有的：

angularjs zurb-foundation

使用Zurb基金会与AngularJS互通我正在研究一个使用ZURB基金会作为CSS框架的angurjs项目。我试图弄清楚如何在AngularJS视图的上下文中使用Foundation。这可能吗，我似乎无法让它工作。这就是我目前拥有的：,angularjs,zurb-foundation,Angularjs,Zurb 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=

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>

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

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

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


测试交换台

当我加载我的应用程序时，我可以看到“测试交换”。但是，不会显示基于屏幕大小的内容（phone.html、trait.html、scape.html）。Phone.html、ratio.html和scape.html在DIV元素中只包含文本，有效地表示“Phone”、“ratio”和“scape”

有没有办法在AngularJS ng视图中利用Foundation的数据交换功能？如果是，怎么做？谢谢

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

为了克服这个问题，您需要使用$（document.foundation（'interchange'，'reflow'）手动触发数据交换；或$（document.foundation（'reflow'）；重新焊接所有组件

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

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

希望这对你有帮助