Utilizzo di Zurb Foundation Interchange con AngularJS
-
21-12-2019 - |
Domanda
Sto lavorando a un progetto AngularJS che utilizza Zurb Foundation come struttura CSS.Sto cercando di capire come utilizzare la Fondazione interchange di dati nel contesto di una vista angolare.È anche possibile, non riesco a farlo funzionare.Questo è ciò che attualmente ho:
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>
.
Quando carico la mia app, posso vedere "test interscambio".Tuttavia, il contenuto (telefono.html, portrait.html, Landscape.html) in base alle dimensioni dello schermo non viene mostrato.Phone.html, ritratto.html e paesaggio.html ha appena testo all'interno di elementi div che dicono "telefono", "ritratto" e "paesaggio" in modo efficace.
C'è un modo per sfruttare le cose di scambio di dati della fondazione all'interno di una vista angolarjs ng?Se é cosi, come?Grazie
Soluzione
Il punto principale qui è che la funzionalità di intercambiatore dati di Zurb funziona su Domcontentload Event e il carico di visualizzazioni AngularJS è ASYNC.Quindi, l'evento è già successo.
Per superare questo, è necessario attivare manualmente l'intercambiamento dei dati utilizzando $ (documento) .Foungazione ('interscambio', 'reflow');o $ (documento) .Foungamento ('reflow');per riflare tutti i componenti.
Per attivare questo nel posto giusto, è necessario ascoltare un evento speciale sul sistema di routing AngularJS chiamato $ RouteCangesCess.Qualcosa del genere:
module.run(function ($rootScope) {
$rootScope.$on('$routeChangeSuccess', function () {
$(document).foundation('reflow');
});
});
.
Spero che questo ti aiuti.