我正在一个使用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');
}
exchange.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元素中仅包含有效表示“ Phone”，“ Portrait”和“ Landscape”的文本。
有没有办法在AngularJS ng-view中利用Foundation的数据交换内容？如果是这样，怎么办？谢谢
这里的重点是Zurb的数据交换功能在DOMContentLoad事件上运行，并且AngularJS视图的负载是异步的。因此，该事件已经发生。
为了解决这个问题，您需要使用$（document）.foundation（'interchange'，'reflow'）;手动触发数据交换。或$（document）.foundation（'reflow'）; 回流所有组件。
要在正确的位置触发此事件，您需要在AngularJS路由系统上侦听一个名为$ routeChangeSuccess的特殊事件。像这样：
module.run(function ($rootScope) {
$rootScope.$on('$routeChangeSuccess', function () {
$(document).foundation('reflow');
});
});
希望对您有帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句