使用AngularJS使用Zurb Foundation Interchange
-
21-12-2019 - |
题
我正在使用zurb foundation作为其CSS框架的AngularJS项目。我正在尝试弄清楚如何使用基础的数据互换在AngularJS视图的上下文中。这是可能的,我似乎无法努力工作。这是我目前的:
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,powers.html,landustry.html)。phone.html,postrument.html和landerst.html只有div元素内部的文本,可以有效地说“手机”,“纵向”和“景观”。
有没有办法利用基金会的数据交换的东西在AngularJS NG-View中?如果是这样,怎么样?谢谢
解决方案
这里的主要点是Zurb的数据交换功能在DomContentLoad事件上运行,AngularJS视图的负载是异步。所以,事件已经发生了。
要克服这一点,您需要使用$(文档).Foundation('Interchange','Respow')手动触发数据交换;或$(文件).Foundation('回流');回流所有组件。 要在正确的位置触发它,您需要收听AngularJS路由系统的特殊事件,称为$ forfechangesuccess。这样的东西:module.run(function ($rootScope) {
$rootScope.$on('$routeChangeSuccess', function () {
$(document).foundation('reflow');
});
});
.
希望这可以帮助你。
不隶属于 StackOverflow