大佬教程收集整理的这篇文章主要介绍了使用Zurb Foundation Interchange和AngularJS，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
的index.html
@H_772_3@<!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
@H_772_3@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
@H_772_3@<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的数据交换内容？如果是这样,怎么样？谢谢
要克服这个问题,你需要使用$(document).foundation(‘interchange’,’reflow’)手动触发数据交换;或$(document).foundation(‘reflow’);回流所有组件.
要在正确的位置触发此操作,您需要在AngularJS路由系统上侦听名为$routeChangesuccess的特殊事件.像这样的东西：
@H_772_3@module.run(function ($rootScopE) { $rootScope.$on('$routeChangesuccess',function () { $(document).foundation('reflow'); }); });希望这对你有所帮助.
以上是大佬教程为你收集整理的使用Zurb Foundation Interchange和AngularJS全部内容，希望文章能够帮你解决使用Zurb Foundation Interchange和AngularJS所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。