Usando el intercambio de la Fundación Zurb con Angularjs

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

  •  21-12-2019
  •  | 
  •  

Pregunta

Estoy trabajando en un proyecto AngularJS que utiliza la Fundación Zurb como su marco CSS.Estoy tratando de averiguar cómo usar la Fundación intercambio de datos dentro del contexto de una vista de AngularJS.Es esto incluso posible, parece que no puedo hacer que funcione.Esto es lo que tengo actualmente:

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>

Cuando cargue mi aplicación, puedo ver 'Intercambio de pruebas'.Sin embargo, el contenido (teléfono.html, retrato.html, landstape.html) basado en el tamaño de la pantalla no se muestra.Phone.html, retrato.html y paisaje.html solo tienen texto dentro de los elementos div que dicen 'teléfono', 'retrato', y 'paisaje' de manera efectiva.

¿Hay alguna manera de aprovechar las cosas de intercambio de datos de la Fundación dentro de una vista angularJS NG?¿Si es así, cómo?Gracias

¿Fue útil?

Solución

El punto principal aquí es que la función de intercambio de datos de Zurb se ejecuta en el evento DomContentload, y la carga de las vistas de AngularJS es ASYNC.Entonces, el evento ya sucedió.

Para superar esto, debe activar el intercambio de datos manualmente usando $ (documento) .Foundation ('intercambio', 'refllow');o $ (documento) .Foundation ('Reflow');para refluir todos los componentes.

Para activar esto en el lugar correcto, debe escuchar un evento especial en el sistema de enrutamiento de Angularjs llamado RutaChangesuccess.Algo así: 

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

Espero que esto te ayude.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top