从指令[AngularJS]的链接函数中获取DOM层次结构中的元素

Question

我有一个简单的DOM层次结构，我想获取一组特定的元素（我想要所有canvas元素）。 这是此伪指令的整个模板：

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

我想创建一个包含＃charts-container元素中所有画布的列表，但我做不到。 这是我要在链接函数中执行的操作：

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

然后我得到了这个元素，但是我不知道如何从这里获取所有图表包装器元素。

我尝试执行look.context.children ，它返回了一个空列表，但同时向我展示了我想要的好像填充了列表一样的内容，这是一张图片 。 如果我尝试访问此列表的任何索引，它将返回未定义的值（这很好，因为它是一个空列表。但是为什么控制台会向我显示这些值？）

实现此目标的最佳方法是什么？ 要获得此模板中的所有canvas元素？ （其中有15个）。 谢谢！

---

-更新-

我意识到，如果删除模板中使用的ng-repeat属性，它将起作用！ 但是我需要ng-repeat ...

element.find('.chart-canvas')设法获取canvas元素，但前提是没有ng-repeat属性。

这是使用ng-repeat时的常见问题吗？ 在这种情况下跌倒时有什么特殊治疗方法吗？

Answer 1

我认为应该是element.find('.chart-canvas')而不是element.find('#chart-canvas') 。 这样做有什么用吗？

Answer 2

我在此线程中找到了解决方案。

显然我正在尝试访问尚未呈现的DOM。 因此，用以下命令包装对画布的查询

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

解决了此问题，因为使用$timeout将等待所有$ digest循环完成。

我想更好地了解渲染管道在AngularJS中的工作方式，以避免陷入此类问题。 如果有人链接到线程或对此进行了解释，将不胜感激。