Verwendung von Zurb Foundation Interchange mit AngularJS

Ich arbeite an einem AngularJS-Projekt, das Zurb Foundation als CSS-Framework verwendet. Ich versuche herauszufinden, wie man Foundation's data interchange im Kontext einer AngularJS-Ansicht verwendet. Ist das überhaupt möglich, kann ich es nicht funktionieren lassen. Dies ist, was ich derzeit haben:Verwendung von Zurb Foundation Interchange mit 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>

Wenn ich meine App lade, kann ich "Testaustausch" sehen. Der Inhalt (phone.html, portrait.html, landscape.html) basierend auf der Größe des Bildschirms wird jedoch nicht angezeigt. Phone.html, Portrait.html und landscape.html haben nur Text in DIV-Elementen, die "Phone", "Portrait" und "Landscape" effektiv anzeigen.

Gibt es eine Möglichkeit, das Datenaustauschmaterial von Foundation innerhalb einer AngularJS ng-view zu nutzen? Wenn das so ist, wie? Danke

Quelle

2014-01-09 JQuery Mobile

Der Hauptpunkt hier ist, dass die Datenaustauschfunktion von Zurb auf DOMContentLoad-Ereignis ausgeführt wird, und die Last von AngularJS-Ansichten asynchron ist. Also, das Ereignis ist schon passiert.

Um dies zu umgehen, müssen Sie den Datenaustausch manuell mit $ (document) .foundation ('interchange', 'reflow') auslösen; oder $ (Dokument) .foundation ('Reflow'); um alle Komponenten aufzulösen.

Um dies an der richtigen Stelle auszulösen, müssen Sie ein spezielles Ereignis auf dem AngularJS-Routing-System namens $ routeChangeSuccess abhören. Etwas wie dieses:

module.run(function ($rootScope) { 
    $rootScope.$on('$routeChangeSuccess', function() { 
     $(document).foundation('reflow'); 
    }); 
});

Hoffe, dass diese Ihnen helfen.

Quelle

2014-01-09 11:49:03

Verwendung von Zurb Foundation Interchange mit AngularJS

Antwort

Verwandte Themen