我正在开发一个使用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的数据交换内容？如果是这样,怎么样？谢谢
这里的要点是Zurb的数据交换功能在DOMContentLoad事件上运行,而AngularJS视图的加载是异步的.所以,事件已经发生了.
要克服这个问题,你需要使用$(document).foundation(‘interchange’,’reflow’)手动触发数据交换;或$(document).foundation(‘reflow’);回流所有组件.
要在正确的位置触发此操作,您需要在AngularJS路由系统上侦听名为$routeChangeSuccess的特殊事件.像这样的东西：
module.run(function ($rootScope) {
$rootScope.$on('$routeChangeSuccess',function () {
$(document).foundation('reflow');
});
});
希望这对你有所帮助.
