Holen Sie sich ein Element in DOM-Hierarchie von der Link-Funktion einer Direktive [AngularJS]

Question

Ich habe eine einfache DOM-Hierarchie und ich möchte eine bestimmte Reihe von Elementen (Ich möchte alle Canvas Elemente). Dies ist die gesamte Vorlage für diese Richtlinie:

<div id='charts-container'> 
    <div class='chart-wrapper' ng-repeat='chart in getNumberOfCharts() track by $index'> 
     <canvas id="{{'exam-chart-' + $index}}" class='chart-canvas'></canvas> 
    </div> 
</div> 

Ich möchte innerhalb der # Charts-Container Element eine Liste mit allen der Leinwand zu schaffen, aber ich kann einfach nicht. Das ist, was ich versuche in der Link-Funktion zu tun:

link: function (scope, element, attributes, controller) { 
    var look = element.find('#chart-canvas'); 
    $log.debug(look); 
} 

Und dann bekomme ich this Element, aber ich weiß nicht, wie von hier aus all Diagramm-Wrapper-Elemente zu erhalten.

Ich versuchte tun look.context.children, es gab eine leere Liste zurück, aber zur gleichen Zeit zeigte mir, was ich wollte, als ob die Liste ausgefüllt wäre, hier ist ein image. Wenn ich versuche, auf einen Index dieser Liste zuzugreifen, gibt er undefined zurück (was gut ist, weil es eine leere Liste ist. Aber warum zeigt mir die Konsole diese Werte an?)

Was ist der beste Weg, dies zu erreichen? Um alle Canvas-Elemente in dieser Vorlage zu erhalten? (Es gibt 15 von ihnen). Vielen Dank!

---

--- --- UPDATE

Ich erkennen, dass, wenn ich das ng-repeat Attribut entferne ich bin in der Vorlage verwenden, es funktioniert! Aber ich brauche die ng-Wiederholung ...

element.find('.chart-canvas') Verwalten Sie das Canvas-Element, aber nur, wenn es keine ng-Repeat-Attribut gibt.

Ist dies ein häufiges Problem bei der Verwendung von ng-Repeat. Gibt es in diesem Fall eine spezielle Behandlung?

Answer 1

fand ich eine Lösung in this thread.

Anscheinend war ich versucht, DOM zugreifen, die bisher noch nicht gemacht hat. Also, mit meiner Anfrage für die Leinwand Einwickeln

$timeout(function() { 
    var canvasList = element.find('.chart-canvas'); 
}, 0); 

löste das Problem, da $timeout Verwendung warten, bis alle Zyklen $ verdauen abgeschlossen sind.

Ich möchte gerne besser wissen, wie die Rendering-Pipeline in AngularJS funktioniert, um solche Probleme zu vermeiden. Wenn jemand einen Link zu einem Thread oder eine Erklärung dazu hat, würde es sehr geschätzt werden.

Answer 2

Ich denke, es sollte element.find('.chart-canvas') statt element.find('#chart-canvas') sein. Funktioniert es mit dieser Änderung?