使用Zurb基金会互换与AngularJS [英] Using Zurb Foundation Interchange with AngularJS
问题描述
我正在使用Zurb基金会作为其CSS框架的AngularJS项目。我想弄清楚如何使用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:
的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元素说电话，肖像里的文字，和'景观'有效。
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.
有没有一种方法，以充分利用AngularJS NG-视图里面基金会的数据交换东西吗？如果是这样，怎么样？谢谢
Is there a way to leverage Foundation's data interchange stuff inside of a AngularJS ng-view? If so, how? Thank you
推荐答案
这里的要点是Zurb的数据交换功能上DOMContentLoad事件运行，并AngularJS的意见负载异步。因此，该事件已经发生了。
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.
要克服这一点，你需要手动触发数据交换使用的$（document）.foundation（'交流'，'回流'）;或$（文件）.foundation（'回流'）;回流的所有组件。
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.
要触发这个在正确的地方，你需要听一个特殊的事件上AngularJS路由系统名为$ routeChangeSuccess。事情是这样的：
To trigger this on the right place, you need to listen to a special event on AngularJS routing system called $routeChangeSuccess. Something like this:
module.run(function ($rootScope) {
$rootScope.$on('$routeChangeSuccess', function () {
$(document).foundation('reflow');
});
});
希望这有助于你。
Hope this help you.
这篇关于使用Zurb基金会互换与AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
