Das mag wie eine dumme Frage erscheinen, aber ich muss wissen, wie man das gesamte DOM einer Seite beobachtet und es jedes Mal neu kompiliert, wenn es sich ändert. Im Wesentlichen ist dies, was AngularJS standardmäßig durch die Verwendung von Datenbindungen tut, aber ich muss dies immer dann tun, wenn etwas im DOM geändert wird, nicht nur Bindungen. Der Grund dafür ist, dass ich eine App habe, die komplett in HTML, Javascript und PHP erstellt wurde. Es ist eine einzelne Seite Anwendung, es hat eine Hauptseite und injiziert PHP in einen DIV-Wrapper innerhalb dieser Seite.
Ich möchte einige Änderungen vornehmen, möchte aber meinen Code vollständig vom ursprünglichen Code trennen. Um dies zu tun, muss ich das DOM jederzeit neu kompilieren können, wenn eine neue PHP-Datei mit einer eigenen DOM-Struktur eingefügt wird. Was ich bisher gesehen habe, scheint nicht zu funktionieren.
%Vor% Ich füge das Attribut watch dem <body> -Tag hinzu, aber es scheint nicht zu funktionieren, wenn das dom geändert wird, wird nichts geloggt. Letztendlich möchte ich das console.log durch $ compile ersetzen, aber zuerst muss ich die Uhr zum Laufen bringen. Kann mir jemand auf das hinweisen, was ich falsch mache?
Wie ich in meinen Kommentaren oben gesagt habe, ist es eine schlechte Idee, das zu tun, was Sie tun wollen. Das heißt, wenn du diesen Weg noch gehen willst, kannst du $watch einfach über alles machen, indem du eine Funktion als ersten Parameter übergibst.
Der folgende Code prüft, ob sich der HTML-Code im <body> -Tag geändert hat. Bitte beachten Sie, dass das eine Horror-Idee ist.
Die obige Uhr wird jederzeit ALLES in den HTML-Änderungen ausgelöst.
Zusätzliche Informationen: Im Moment gibt es in einer ganzen Reihe von Browsern keine wirklich gute Möglichkeit, nach neuen geladenen DOM-Elementen zu suchen. Der beste Weg ist immer noch, etwas auszulösen, sobald neue DOM-Elemente hinzugefügt wurden.
Wie von Steinway Wu erwähnt, ist MutationObserver der richtige Weg. Hier ist ein Ausschnitt:
%Vor% Wie bereits erwähnt hier (Mutation Events) können Sie Listener hinzufügen DOM-Mutationsereignisse wie DOMSubtreeModified .
z.B. element.addEventListener("DOMSubtreeModified", function (ev) {...}, false)
Aktualisieren
Und tatsächlich empfehlen sie stattdessen, stattdessen Mutation Observer zu verwenden.
Ich weiß, dass dies ein altes Thema ist, aber ich habe ein ähnliches Problem beim Versuch, Änderungen im Inhalt eines Elements, das mit HTML-Code gefüllt ist, dynamisch aus dem Modell mit ng-bind-html zu entdecken
Was ist mit der Zuordnung einiger benutzerdefinierter Daten zu den untergeordneten Elementen Ihres Elements ng-bind-html mit jqLites data() ? um zu erkennen, ob der Inhalt ersetzt wurde (und daher die benutzerdefinierten Daten verloren gingen)?
Dies wäre der Code eines directive , um die Änderungen eines Elements zu beobachten, das mit ng-bind-html gefüllt ist:
Ich hoffe, es hilft.
Kommentare sind willkommen.
Rafa
Tags und Links javascript angularjs dom