Usando magia, intriga Fundação de Intercâmbio com AngularJS

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

  •  21-12-2019
  •  | 
  •  

Pergunta

Eu estou trabalhando em um AngularJS projeto que usa magia, intriga Fundação como seu framework CSS.Eu estou tentando descobrir como utilizar Fundação o intercâmbio de dados dentro do contexto de uma AngularJS vista.É isso mesmo, eu não consigo fazê-lo funcionar.Isso é o que eu tenho atualmente:

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>

Quando eu carregar meu app, eu posso ver o 'teste de intercâmbio'.No entanto, o conteúdo (phone.html, portrait.html, landscape.html) com base no tamanho da tela não é mostrado.Phone.html, Portrait.html e landscape.html só tem texto dentro da DIV elementos que dizer 'Telefone', 'Retrato', e 'Paisagem' de forma eficaz.

Existe um caminho para a alavancagem da Fundação de intercâmbio de dados coisas dentro de um AngularJS ng-vista?Se sim, como?Obrigado

Foi útil?

Solução

O ponto principal aqui é que os dados-intercâmbio recurso de magia, intriga é executado em DOMContentLoad evento, e a carga do AngularJS pontos de vista é assíncrona.Então, o evento já aconteceu.

Para superar isso, você precisa acionar os dados-intercâmbio manualmente usando o $(document).fundação('intercâmbio', 'refluxo');ou $(document).fundação('refluxo');para reorganizar todos os componentes.

Para acionar esta no lugar certo, você precisa ouvir um evento especial em AngularJS sistema de roteamento chamado $routeChangeSuccess.Algo como isto:

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

Espero que isso ajude você.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top