AngularJS: inicializar o ZURB Foundation JS

Eu estou usando AngularJS e Foundation.

Para inicializar o Foundation JS, você deve fazer a seguinte chamada:

$(document).foundation(); 

Qual seria a melhor maneira de fazer essa chamada em um aplicativo AngularJS? Exemplos de código seriam apreciados.

Além disso, se eu fosse escrever uma diretiva em torno de um componente Foundation JS, como eu poderia garantir que o Foundation fosse inicializado?

Você poderia $apply o código para trazê-lo para o framework Angular. Aqui está um exemplo usando $rootScope com run e isso também pode ser feito dentro de um controller / directive com qualquer $scope :

 app.run(function($rootScope){ $rootScope.$apply($(document).foundation()); }); 

Outra opção::

 $compile($(document).foundation())($scope); 

Certifique-se de include o serviço $compile no seu controller / directive para usá-lo desta maneira. Por exemplo:

 app.directive('mydirective', function($compile) { return { link: function(scope, element, attrs) { $compile($(document).foundation())(scope); } } }); 

Aqui está a minha opinião, em app.js :

 .run(function($rootScope) { $rootScope.$on('$viewContentLoaded', function () { $(document).foundation(); }); }); 

que reinicializará o Foundation quando uma nova exibição for carregada (para que os componentes contidos na nova exibição também sejam inicializados). Desta forma, seus controladores não precisam estar cientes disso.

Existe um suporte nativo a angular para a fundação. Confira a Fundação Angular .

O Angular Foundation é um porto do excelente projeto angular-bootstrap da equipe AngularUI para uso no framework Foundation.

Não tem dependencies, mas apenas a biblioteca angular e o CSS da fundação.

Um método que eu tenho usado é apenas include uma tag no final da minha parcial / template.

Desta forma, eu posso direcionar apenas o novo conteúdo de cada parcial - em vez de fazer a fundação js, ​​re-analisar o DOM inteiro.

por exemplo, no meu header.html:

 

Logo

Panel 1
Loren Ipsum blah blah blah....

Especialmente se o seu aplicativo tiver muitos elementos DOM na página, isso pode melhorar consideravelmente a performance.

Tente o seguinte código:

 app.run(function($timeout){ $timeout(function() { $(document).foundation(); }, 500); }); 

Isso resolveu meu problema tentando fazer a Fundação revelar o trabalho.

Para projetos do tipo Angular 4 (ou 2) do TypeScript usando Componentes:

De acordo com a postagem do blog, declare $ como uma variável no componente e, em seguida, chame $(document).foundation(); em ngOnInit() funcionou para mim!

Com Angular, os componentes são injetados no DOM após o carregamento da Foundation. Quando você carrega um novo componente e o injeta, a Foundation não sabe que está lá. Precisamos informar à Foundation para reinicializar e vincular novamente, para que esses atributos fiquem conectados. http://justindavis.co/2017/06/15/using-foundation-6-in-angular-4/

 { import Component } from '@angular/core'; declare let $: any; // TO ACCESS JQUERY '$' FUNCTION @Component({ selector: 'my-component', templateUrl: './my-component.html' // other stuff here }); export class MyComponent implements OnInit { constructor() {} ngOnInit() { $(document).foundation(); // CALL foundation() INITIALIZATION FUNCTION FROM HERE } }