Fullpage.js wird in einer eckigen App mehrmals initialisiert

Ben Janes

Ich erstelle eine Angular-App, die auf einigen Seiten fullpage.js verwendet. Derzeit initialisiere ich die ganze Seite (z. B. $('#this-routes-fullpage').fullpage({ options... })) mithilfe einer benutzerdefinierten Direktive in der Vorlage für jede Route, auf der sie verwendet wird. Am Ende jeder dieser benutzerdefinierten Anweisungen rufe ich an

scope.$on('$routeChangeStart', function() {
    $.fn.fullpage.destroy('all');
}

Dies funktioniert wie erwartet (das Plugin wird beim nächsten Auftreten zerstört und neu initialisiert), wenn ich von einer Seite, die das Plugin verwendet, zu einer anderen Seite navigiere, die es nicht verwendet, und dann zurück zu einer dritten Seite, die das Plugin verwendet nutzt es. Wenn dieser Zwischenschritt jedoch weggelassen wird und ich direkt von einer Route, die die ganze Seite verwendet, zu einer zweiten Route navigiere, die sie auch verwendet, wird das Plugin nicht richtig initialisiert. Damit meine ich, dass die Steuerung nicht funktioniert.

Dies lässt mich denken, dass es einen besseren Ort für mich gibt, um die Zerstörungsfunktion aufzurufen, die Angular-Ereignisse richtig ausnutzt. Kann mir jemand dabei helfen? Vielen Dank!

Alvaro

Aktualisieren:

Jetzt können Sie die offizielle Angular-Komponente für fullPage.js verwenden .


Zerstören Sie es einfach, wann und wo immer Sie es initialisieren. Zum Beispiel kurz vor der Initialisierung:

//destroying
if (typeof $.fn.fullpage.destroy == 'function') { 
    $.fn.fullpage.destroy('all');
}

//initializing 
$('#fullpage').fullpage();

Oder Sie können einfach überprüfen, ob es initialisiert wurde, bevor Sie die Klasse / das Flag überprüfen, die fullPage.js Ihrem HTML-Element hinzufügt (vorausgesetzt, dies wird in Ihren Ajax-Aufrufen nicht geändert).

//destroying
if($('html').hasClass('fp-enabled')){
    $.fn.fullpage.destroy('all');
}

//initializing 
 $('#fullpage').fullpage();

Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.

Bei Verstößen wenden Sie sich bitte [email protected] Löschen.

bearbeiten am
0

Lass mich ein paar Worte sagen

0Kommentare
LoginNach der Teilnahme an der Überprüfung

Verwandte Artikel

Inline-Variable wird mehrmals initialisiert

Definieren der App in einer separaten Datei in eckigen js

Warum wird Bean während Junit-Tests mehrmals initialisiert?

Verwenden einer Suchfunktion in eckigen js

Jmockit @Mocked in einer Hilfsklasse wird nicht initialisiert

ArrayList einer Objektklasse wird nicht initialisiert

HKQuantityTypeIdentifier wird mit einer Zeichenfolge initialisiert

Sammeln Sie gestreamte Daten in einer eckigen App

So lösen Sie einen Versionskonflikt von Clarity-icons.min.js in einer eckigen App

Eine eckige Materialkomponente sieht anders aus, wenn sie einer leeren eckigen App hinzugefügt wird als im Beispiel

Warum wird mein Pseudo-Element in einer HTML-Demo angezeigt, aber nicht in meiner eckigen 5-App?

So zeigen Sie E-Mails in einer eckigen App an, wie sie in einem E-Mail-Client angezeigt wird

Wie kann verhindert werden, dass die SwiftUI-Anfangsansicht mehrmals initialisiert wird, wenn @State-Variablen initialisiert werden?

React JS setTimeout wird mehrmals ausgeführt

Warum wird WorkManager mehrmals gestartet, sobald meine App gestartet wird?

Bereitstellen einer eckigen App auf einer aws-Cloudfront

Routing von einer Seite zur anderen in einer eckigen App

Element nicht gefunden, wenn xpath an einer eckigen Stelle verwendet wird

Bereitstellen des eckigen js-Frontend-Moduls (statische Dateien) als separater Dienst in GCP App Engine in einer flexiblen Umgebung

Swift @ObservedObject wird mit einer anderen Eigenschaft initialisiert

Wann wird eine Schnittstelle mit einer Standardmethode initialisiert?

NullPointerException, wenn das Objekt in einer anderen Methode initialisiert wird

GoogleMaps wird beim Laden einer Seite nicht initialisiert

Standardmäßig wird ein Zeiger in einer Vorlage initialisiert

Abrufen der Adresse einer Variablen, die im Datenabschnitt initialisiert wird

C # - Werden statische Eigenschaften einer Klasse jedes Mal initialisiert, wenn diese Klasse initialisiert wird?

Beim Formatieren einer Zeichenfolge wird derselbe Wert mehrmals eingefügt

Wenn Sie @PostConstruct in einer Testklasse verwenden, wird es mehrmals aufgerufen

Auswahl einer ID, die mehrmals angezeigt wird, unterschiedliche Daten

TOP Liste

  1. 1

    Wie aktualisiere ich ein Feld in einer Raumdatenbank mit einem Repository und einem Ansichtsmodell?

  2. 2

    Wie füge ich mehrere Spalten in einer Spalte mit derselben Tabelle in SQL Server zusammen?

  3. 3

    Wie kann man Gitterquadrate dazu bringen, die Farbe zu ändern?

  4. 4

    Ich kann nicht verstehen, wie man Go-Code in mehreren Dateien kompiliert

  5. 5

    Zählen Sie die Vorkommen jedes Werts in einem Tupel in Python

  6. 6

    Gibt es eine sauberere Möglichkeit, Konstruktorargumente und Instanzeigenschaften einer Klasse in Typescript zu definieren?

  7. 7

    So implementieren Sie Pushwoosh mit ionic 2

  8. 8

    Wie wird der Wert im Dropdown-Menü basierend auf den ausgewählten Daten / IDs angezeigt?

  9. 9

    Tomcat - Leiten Sie den alten Kontextstamm zum neuen Kontextstamm um

  10. 10

    Ändern Sie den Knotenpfad in das aktuelle Verzeichnis

  11. 11

    So erstellen Sie ein Array von Objekten aus zwei Arrays von Objekten mit einem gemeinsamen Schlüssel - JavaScript

  12. 12

    Rufen Sie die ID aus der Datagrid-Ansicht ab und zeigen Sie die Daten in Textfeldern einem anderen Formular an

  13. 13

    base js: Wie füge ich einem Objekt eine Eigenschaft auf die 'alte' Weise hinzu?

  14. 14

    Ersetze einen Teil einer Zeichenfolge durch eine Pandas-Spalte als Muster

  15. 15

    Blättern Sie auf Radio Click zur Abschnitts-ID

  16. 16

    CBCentralManager wird nach dem Verbinden neu gestartet

  17. 17

    Scherz, wie man eine Funktion verspottet, die von einer verspotteten Funktion zurückgegeben wird

  18. 18

    django-allauth Empfängersignal zum Hinzufügen einer Gruppenberechtigung zum Benutzer bei der Anmeldung

  19. 19

    Tic Tac Toe-Spiel im React-Reset-Button funktioniert nicht

  20. 20

    AQL: Teilweise Übereinstimmung in einer Reihe von Zeichenfolgen

  21. 21

    So summieren Sie die Werte zweier Tabellen und gruppieren sie nach Datum

heißlabel

Archiv