Utilisation de l'échange de la Fondation Zurb avec angularjs

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

  •  21-12-2019
  •  | 
  •  

Question

Je travaille sur un projet angularjs qui utilise Zurb Foundation comme cadre CSS.J'essaie de déterminer comment utiliser Interchange de données dans le contexte d'une vue angularjs.Est-ce que cela est encore possible, je ne peux pas sembler le faire fonctionner.C'est ce que j'ai actuellement:

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>

Lorsque je charge mon application, je peux voir "l'échange de tester".Cependant, le contenu (téléphone.html, portrait.html, landscape.html) basé sur la taille de l'écran n'est pas affiché.Téléphone.html, portrait.html et paysage.html ont juste un texte à l'intérieur des éléments divisés qui disent «téléphone», «portrait» et «paysage» efficacement.

Y a-t-il un moyen d'exploiter des trucs d'échange de données de la Fondation à l'intérieur d'une vue angularjs NG-View?Si c'est le cas, comment?Merci

Était-ce utile?

La solution

Le point principal Voici que la fonctionnalité de données-interchange de ZURB est exécutée sur l'événement DomContenTload, et la charge des vues angularjs est asynchraement.Donc, l'événement est déjà arrivé.

Pour surmonter cela, vous devez déclencher l'interchange de données manuellement en utilisant $ (document). Fondation ('Interchange', "Refound");ou $ (document) .coundation («refus»);Pour refuser tous les composants.

Pour déclencher cela au bon endroit, vous devez écouter un événement spécial sur le système de routage angularjs appelé $ Pitechangesuccess.Quelque chose comme ça: 

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

J'espère que cela vous aidera.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top