ディレクティブのリンク関数からDOM階層内の要素を取得する[AngularJS]

Question

私は単純なDOM階層を持ち、特定の要素を取りたい（キャンバスのすべての要素が必要です）。これは、このディレクティブの全体のテンプレートです：

<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> 

私は＃チャートコンテナ要素内のすべてのキャンバスでリストを作成したいが、私はちょうどことはできません。

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

そして私はthis要素を得るが、私はここからすべてのチャートのラッパー要素を取得する方法がわからない：これは私がリンク関数の内部でやろうとしているものです。

私はlook.context.childrenを実行しようとしましたが、空のリストを返しましたが、同時にリストに値が設定されているかのように私に示しました。ここにはimageです。このリストのインデックスにアクセスしようとすると、未定義の値が返されます（空リストなので、これは問題ありません）。

これを達成する最良の方法は何ですか？このテンプレートのすべてのキャンバス要素を取得するには？ （そのうちの15があります）。ありがとう！

---

--- UPDATE ---私は私がテンプレートで使用しているNG-繰り返し属性を削除した場合、それが動作することを実現

！しかし、ng-repeat属性がない場合に限り、ng-repeatが必要です。

element.find('.chart-canvas') canvas要素を取得するように管理します。

これは、ng-repeatを使用する場合の共通の問題ですか。この場合、特別扱いはありますか？

Answer 1

私はどうやら私はまだレンダリングされていないDOMにアクセスしようとしていたthis thread.

で解決策を見つけました。すべての$ダイジェストのサイクルが完了するまで$timeoutを使用してお待ちしておりますので、だから、

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

とキャンバスのための私のクエリを巻き付けて、問題を解決しました。

この種の問題に陥るのを避けるため、AngularJSでレンダリングパイプラインがどのように機能するかを知りたいと思います。誰かがこのスレッドまたはその説明へのリンクを持っている場合、それは非常に高く評価されます。

Answer 2

element.find('#chart-canvas')の代わりにelement.find('.chart-canvas')とする必要があります。その変更に対応していますか？