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>

我想在 #chart-container 元素中创建一个包含所有画布的列表，但我不能这样做。这就是我在链接功能中尝试做的事情：

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

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

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

实现这一目标的最佳方法是什么？要获取此模板中的所有画布元素？（其中有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

我在this thread.

中找到了解决方案

显然我正在尝试访问尚未呈现的DOM。因此，使用

包装我对画布的查询

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

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

我想更好地了解渲染管道在AngularJS中的工作原理，以避免陷入此类问题。如果有人有线索的链接或对此的解释，将非常感激。

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

2 个答案: