Использование фонда Zurb Foundation с Angularjs

StackOverflow https://stackoverflow.com//questions/21019132

  •  21-12-2019
  •  | 
  •  

Вопрос

Я работаю над проектом Angularjs, который использует основание Zurb в качестве своей структуры CSS.Я пытаюсь выяснить, как использовать Foundation's Обмен данными в пределах контекста 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, портрет .html, landscape.html) на основе размера экрана не отображается.Phone.html, private.html и landscape.html просто есть текст внутри элементов div, которые говорят «телефон», «портрет» и «ландшафт» эффективно.

Есть ли способ использовать обменные данные фундамента на ветре внутри Angularjs NG-View?Если так, как?Спасибо

Это было полезно?

Решение

Основной точкой здесь состоит в том, что функция данных обмена данными ZURB работает на событии DOMContentloadLoad, а нагрузка видов Angularjs является Async.Итак, событие уже произошло.

Чтобы преодолеть это, вам необходимо запустить развязку данных вручную, используя $ (документ) .foundation («обмен», «ROOCK»);или $ (документ) .Foundation («ROCK»);Чтобы отравить все компоненты.

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top