Использование Zurb Foundation Interchange с AngularJS

Я работаю над проектом AngularJS, который использует Zurb Foundation в качестве рамки CSS. Я пытаюсь выяснить, как использовать Foundation data interchange в контексте вида AngularJS. Возможно ли это, я не могу заставить его работать. Это то, что я в настоящее время:Использование Zurb Foundation Interchange с 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, portrait.html, landscape.html), основанный на размере экрана, не отображается. Phone.html, Portrait.html и landscape.html имеют только текст внутри элементов DIV, которые эффективно говорят «Телефон», «Портрет» и «Пейзаж».

Есть ли способ использовать материал обмена данными Фонда внутри AngularJS ng-view? Если да, то как? Спасибо

источник

2014-01-09 JQuery Mobile

Главное здесь, что функция обмена данными Zurb работает в событии DOMContentLoad, а загрузка представлений AngularJS является асинхронной. Итак, событие уже произошло.

Чтобы преодолеть это, вам необходимо инициировать обмен данными вручную, используя $ (document) .foundation ('interchange', 'reflow'); или $ (document) .foundation ('reflow'); для оплавления всех компонентов.

Чтобы вызвать это в нужном месте, вам необходимо прослушать специальное событие в системе маршрутизации AngularJS под названием $ routeChangeSuccess. Что-то вроде этого:

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

Надеюсь, это поможет вам.

источник

2014-01-09 11:49:03

Использование Zurb Foundation Interchange с AngularJS

ответ

Смежные вопросы