AngularJS: inicializar ZURB Foundation JS

Aquí está mi opinión, en app.js:

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

Que reinicializará Foundation cuando se cargue una nueva vista (de modo que los componentes contenidos en la nueva vista también se inicialicen). De esta manera, sus controladores no necesitan ser conscientes de esto.

Existe un soporte nativo AngularJS para foundation. Echa un vistazo a Angular Foundation.

Angular Foundation es una adaptación del excelente proyecto angular-bootstrap del equipo AngularUI para su uso en el framework Foundation.

No tiene dependencias sino la propia biblioteca angular y solo CSS de foundation.

Un método que he estado usando es incluir una etiqueta <script> al final de mi partial / template.

De esta manera, puedo apuntar solo el nuevo contenido de cada parcial instead en lugar de hacer que foundation js vuelva a analizar todo el DOM.

Por ejemplo, en mi encabezado.html:

<header id="app-header">
  <h1>Logo</h1>
  <dl class="accordion" data-accordion>
    <dd>
      <a href="#panel1">Panel 1</a>
      <div id="panel1" class="content">
        Loren Ipsum blah blah blah....
      </div>
    </dd>
  </dl>
</header>

<!-- add this tag on bottom of template / partial -->
<script>$('#app-header').foundation();</script>

Especialmente si su aplicación tiene muchos elementos DOM en la página, esto puede mejorar el rendimiento considerablemente.

Intente el siguiente código:

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

Se resolvió mi problema tratando de conseguir Fundación revelar trabajo.

Para TypeScript Angular 4 (o 2) proyectos que utilizan componentes:

De acuerdo con la entrada de blog dada, declarar $ como una variable en el componente y luego llamar $(document).foundation(); en ngOnInit() funcionó para mí!

Con Angular, los componentes se inyectan en el DOM después de la fundación ha cargado. Cuando se carga un nuevo componente, y se inyecta, La Fundación no sabe que está ahí. Necesitamos decirle a la Fundación que reinicializar y enlazar de nuevo, por lo que estos atributos se conectarán. 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
  }
}