AngularJS, D3 und JQuery auf derselben Seite. D3 kann die korrekten DOM-Dimensionen nicht lesen

9

Ich habe Probleme mit meiner Seite, die nicht richtig geladen werden kann. Ich verwende eine einfache Header-Body-Footer-Struktur in html5 und CSS3.

%Vor%

Was ich gerade mache, ist ein Svg mit D3 innerhalb des Körperraums, der Breite und Höhe dynamisch nach dem Laden des Fensters (und auch der Bilder) liest.

Nun möchte ich eckig hinzufügen, um Code-Redundanz innerhalb jeder Seite der Site zu vermeiden, und ich tat dies:

%Vor%

Um Fußzeile und Kopfzeile mit Direktiven (& lt; Kopfzeile & gt; & lt; / Kopfzeile & gt;) zu behandeln

Dies ist (Teil von) der Code, der zum Erstellen der SVG verwendet wird. Ich werde Ihnen nur zeigen, woran ich interessiert bin, den Teil, der die Messungen vor Ort liest.

%Vor%

Vor der Verwendung von eckigen benutzte ich dies in:

%Vor%

und alles lief sehr gut.

jetzt mit:

%Vor%

Ich habe eine falsche Höhe innerhalb der Var. Es scheint, als ob die "new Search ()" aufgerufen wird, wenn der svg immer noch zu hoch ist (der Header ist noch nicht gerendert)

Dies ist der HTML-Code des Index (vereinfacht)

%Vor%

Dies ist der Code der Kopfzeile:

%Vor%

Ohne angularjs wird es korrekt wiedergegeben, mit eckigen habe ich einen falschen Wert wie das Bild überhaupt nicht geladen wird.

Ich hoffe, meine Frage ist klar genug, das Problem, das ich denke, ist, wenn jede Funktion beim Laden der Seite aufgerufen wird.

EDIT: Es ist auch seltsam, dass manchmal die Seite korrekt geladen wird (zufällige Häufigkeit)

AngularJS Version 1.3.16

    
Gianmarco 17.07.2015, 14:59
quelle

2 Antworten

2

Sie haben also diese seltsame Kreuzung im Verständnis von eckigen. Lassen Sie uns zunächst über angle.element sprechen, das ist nicht dasselbe wie ein jquery-Element. Sie sollten nicht DOM-Manipulation von einem Element, das Sie erstellen, wie sollten Sie eine Direktive mit einer Link-Funktion haben, um sicherzustellen, dass dies im Digest-Zyklus geschieht, wenn Sie es wollen. Dies ist ein hartes Konzept, aber ich denke, das beste Beispiel, das ich finden kann, ist von dieser anderen Frage.

Angular.js: Elementhöhe beim Laden der Seite festlegen

Das macht einen vernünftigen Job, um zu zeigen und zu erklären, worüber wir reden.

    
James 22.07.2015 14:49
quelle
0

Ein einfacher Trick, um zu sehen, ob es mit der Initialisierung der Seite zusammenhängt, wäre, dass Sie Ihren Code in setTimeout aufrufen und für 500ms verzögern. Wenn dies die Messung behebt, müssen Sie nach dem richtigen Ort suchen, an dem Sie Ihren Messcode eingeben möchten: -)

    
Simon Groenewolt 27.07.2015 16:54
quelle

Tags und Links