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

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 元素中所有 Canvas 的列表，但我做不到。这就是我在链接函数中尝试做的事情:

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

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

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

实现这一目标的最佳方法是什么？要获取此模板中的所有 Canvas 元素？ (其中有 15 个)。谢谢!

<小时/>

--- 更新 ---

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

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

这是使用 ng-repeat 时的常见问题吗？遇到这种情况有什么特殊处理吗？

Answer 1

我在 this thread. 中找到了解决方案

显然我正在尝试访问尚未渲染的 DOM。因此，用

包装我对 Canvas 的查询

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

解决了这个问题，因为使用$timeout将等到所有$digest周期完成。

我想更好地了解 AngularJS 中的渲染管道是如何工作的，以避免陷入此类问题。如果有人有此主题的链接或解释，我们将不胜感激。