Ich habe eine externe / öffentliche JavaScript - Bibliothek erstellt.
Während ich es auf einer Angular 1.x Web App teste, indem ich das Skript in die <HEAD>Ich habe festgestellt, dass es die Angular-App bricht, indem Klicks nichts bewirken.
Nach stundenlangem Debuggen von Namespace, Eigenschaften,und Funktionen; Ich habe endlich festgestellt, dass der Schuldige das Einfügen von HTML-Elementen in die Webseite ist. Meine JS-Bibliothek verwendet derzeit diesen Code, um HTML in die Webseite einzufügen. Wie würde ich dafür sorgen, dass Angular-Apps (oder SPAs im Allgemeinen) unterstützt werden?
var HTML_ELEMENTS = ["<h1>Hi</h1>", "<div>Hello again.</div>"];
for (var i = 0; i < HTML_ELEMENTS.length; i++) {
document.body.innerHTML += HTML_ELEMENTS[i];
};
Einer der Gründe, warum ich die HTML-Elemente am Ende von hinzufüge document.body Das liegt daran, dass ich diese Elemente so einstelle, dass sie den höchsten Z-Index auf der Seite haben, sodass alle konkurrierenden Elemente den Z-Index für meine eingefügten HTML-Elemente liefern.
Antworten:
1 für die Antwort № 1Beantwortung meiner eigenen Frage mit meiner Implementierung. Alles Verdienst geht an @Cbroe, mich in die richtige Richtung gelenkt zu haben.
Grundsätzlich können Sie nicht verwenden document.body.innerHTML mit Angular, also hier ist, was ich stattdessen verwendet habe:
var HTML_ELEMENTS = ["<h1>Hi</h1>", "<div>Hello again.</div>"];
for (var i = 0; i < HTML_ELEMENTS.length; i++) {
var child = document.createElement("div");
child.innerHTML = HTML_ELEMENTS[i];
child = child.firstChild;
document.body.appendChild(child);
};