Ich habe drei Plunker erstellt, um mein Problem zu veranschaulichen. Ich versuche eine AngularJS-Direktive zu erstellen, die die Foundation initialisiert und das erforderliche Javascript auf die geladene Vorlage anwendet. Zuerst versuchte ich ngInclude zu verwenden, um die Foundation 5 Navigationsleiste zu allen Seiten meiner Website hinzuzufügen. Der obere Balken funktioniert wie erwartet, wenn der HTML-Code direkt auf einen Teil angewendet wird. Wenn der HTML-Code in einer Direktive wie ngInclude hinzugefügt wird, verliert die obere Leiste ihre gesamte Funktionalität. Ich vermute, dass dies daran lag, dass Foundation nicht initialisiert wird, nachdem die Vorlage von der Direktive hinzugefügt wurde. Als Lösung habe ich eine benutzerdefinierte Direktive erstellt, die das Fundament initialisiert und die HTML-Vorlage kompiliert. Initialisierung der Grundlage, wie ich friere die Anwendung. Hat jemand eine Lösung dafür?
Versuchen Sie dies zu erreichen, ohne auf die Angular UI zurückzugreifen.
Beispiel 1: HTML wurde direkt auf die Ansicht angewendet. Funktioniert wie erwartet, wenn Sie auf das Dropdownmenü klicken, werden die Seiten angezeigt.
Beispiel 2: ngInclude zum Laden der Vorlage in dom verwendet. Keine Funktionalität wird erreicht, wenn Sie auf das Menü Dropdown klicken passiert nichts.
Beispiel 3: Erstellt eine separate Anweisung zum Ersetzen von ngInclude, die das Fundament initialisiert, kompiliert und die Vorlage in das DOM lädt. Kann keinen Plunkr liefern, weil es einfach einfrieren würde, aber hier ist der Code.
%Vor%teilweise angewendet von:
%Vor%Mach das:
%Vor%Wenn Sie das Element selbst kompilieren, erstellen Sie eine Endlosschleife:
$compile(element)(scope); //fail
Achten Sie immer darauf, dass Sie nur den Inhalt des Elements kompilieren:
$compile(element.contents())(scope); //win
Es scheint, dass Sie das gesamte Dokument kompilieren und die Endlosschleife erstellen.
Sie können das wahrscheinlich einfach tun:
%Vor%, weil die Vorlage automatisch kompiliert wird, so dass Sie sie nicht manuell machen müssen.
Hinweis: Es empfiehlt sich, Angulars $document zu injizieren und zu verwenden. Dies ist ein Wrapper für document , der beim Testen hilft. $($document).foundation();
Tags und Links javascript angularjs angularjs-directive zurb-foundation