Sto utilizzando sia AngularJS che Foundation.AngularJS: inizializza ZURB Foundation JS
Per inizializzare Fondazione JS, è necessario effettuare la seguente chiamata:
$(document).foundation();
Quale sarebbe il modo migliore per fare questa chiamata in un'applicazione AngularJS? Esempi di codice sarebbero apprezzati.
Inoltre, se dovessi scrivere una direttiva attorno a un componente JS Foundation, come potrei garantire l'inizializzazione di Foundation?
È possibile il codice $apply per portarlo nel framework Angular. Ecco un esempio utilizzando $rootScope con run e questo potrebbe anche essere fatto all'interno di un controllore/direttiva con qualsiasi $scope:
app.run(function($rootScope){
$rootScope.$apply($(document).foundation());
});
Un'altra opzione ::
$compile($(document).foundation())($scope);
Assicurarsi di includere il servizio $compile nella vostra controller/direttiva per usarlo in questo modo. Ad esempio:
app.directive('mydirective', function($compile) {
return {
link: function(scope, element, attrs) {
$compile($(document).foundation())(scope);
}
}
});
Utilizzando la esempio di codice sopra con esecuzione non sembra funzionare. Ho confermato che usare $ compile in un controller inizializzerà Foundation come semplicemente chiamerà '$ (document) .foundation();'. –
Fresco, questo è quello che stavo cercando, usando la fondazione-6 – pkrawat1
Qui è il mio introito, in app.js:
.run(function($rootScope) {
$rootScope.$on('$viewContentLoaded', function() {
$(document).foundation();
});
});
che sarà ri-inizializzare Fondazione quando si carica una nuova vista (in modo che i componenti contenuti nella nuova visualizzazione sono inizializzati) . In questo modo, i tuoi controllori non devono essere consapevoli di questo.
Questo ha funzionato per me! Grazie mille! – aug
e la preoccupazione sollevata in questa risposta? http://stackoverflow.com/questions/19623078/initializing-zurb-foundations-tooltip-with-angularjs – HaveAGuess
provare il seguente codice:
app.run(function($timeout){
$timeout(function() {
$(document).foundation();
}, 500);
});
E 'risolto il problema cercando di ottenere Fondazione rivelare lavorare.
Un metodo che ho utilizzato è quello di includere solo un tag <script> alla fine del mio partial/template.
In questo modo, posso target solo il nuovo contenuto di ogni partial - invece di fare js di fondazione ri-analizzare l'intero DOM.
per esempio, nel mio header.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>
Specialmente se la vostra applicazione ha un sacco di elementi DOM della pagina, questo può migliorare sensibilmente perfomance.
concesso, di solito si vuole evitare di inquinare il DOM con i tag '
Esiste un supporto angolare per fondamenta. Controlla Angular Foundation.
angolare Fondazione è un porto di progetto eccellente angolare bootstrap della squadra AngularUI per l'impiego nel quadro della Fondazione.
Non ha dipendenze ma solo la libreria angolare e il CSS di base.
Ho appena installato il 'bower'' angular-foundation' e sembra funzionare correttamente. – Webdevotion
Questa libreria non inizializza i componenti Javascript per impostazione predefinita (sono su v0.3.1 - 2014-08-19) –
Sei corretto, non è così. Invece ti permette di utilizzare quasi tutti i plugin javascript della fondazione. –
Per dattiloscritto angolare 4 (o 2) progetti che utilizzano componenti:
Secondo la data post sul blog, dichiarano $ come variabile nel componente e quindi chiamare $(document).foundation(); in ngOnInit() lavorato per me!
Con Angolare, i componenti vengono iniettati nel DOM dopo il caricamento del Foundation . Quando carichi un nuovo componente e lo inietti, la Fondazione non sa che è lì. Abbiamo bisogno di dire alla Fondazione di reinizializzare e legare di nuovo, quindi questi attributi saranno cablati. 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
}
}
io non sono sicuro se questo è di alcuna utilità per voi, ma c'è una porta AngularJS di un gruppo di componenti javascript della Fondazione ora: pineconellc.github.io/angular-foundation/ –