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

米格尔·佩雷斯(MiguelPéres)

我有一个简单的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时的常见问题吗?在这种情况下摔倒时有什么特别的治疗方法吗?

米格尔·佩雷斯(MiguelPéres)

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

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

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

解决了问题,因为使用$timeout将一直等到所有$ digest循环完成。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在angularJs指令的链接函数中获取元素标签的坐标

来自分类Dev

AngularJS:如何在链接函数中获取指令名称?

来自分类Dev

AngularJS:如何在链接函数中获取指令名称?

来自分类Dev

AngularJS-指令链接函数中的$ rootScope

来自分类Dev

AngularJs指令链接函数中的继承

来自分类Dev

angularjs中的层次结构实现

来自分类Dev

使用cypress从复杂的层次结构中获取元素

来自分类Dev

SQL Server函数获取层次结构中的顶级父级

来自分类Dev

AngularJS指令的link()函数中尚未准备好DOM元素

来自分类Dev

元素与AngularJS指令中的this

来自分类Dev

AngularJS->在DOM完成指令中的元素渲染时捕获

来自分类Dev

AngularJs中的嵌套指令不更新View(DOM)元素

来自分类Dev

在JavaScript函数中获取HTML DOM元素

来自分类Dev

在AngularJs模型的指令的链接函数中设置值

来自分类Dev

获取元素的DOM层次结构级别(计数后代级别)

来自分类Dev

如何在角度指令中获取当前的dom元素

来自分类Dev

如何在角度指令中获取当前的dom元素

来自分类Dev

C ++中的虚函数层次结构

来自分类Dev

从层次结构中的根获取最远的值

来自分类Dev

AngularJS:无法在指令中获取动态元素的innerHTML

来自分类Dev

AngularJS指令中的元素高度

来自分类Dev

如何在angularjs的指令函数中获取当前的Controller $ scope?

来自分类Dev

如何在angularjs的指令函数中获取当前的Controller $ scope?

来自分类Dev

AngularJS How:指令的作用域层次结构

来自分类Dev

在ngClick指令中获取元素

来自分类Dev

$ http不是指令的链接函数中的函数

来自分类Dev

指令-修改链接功能中的DOM

来自分类Dev

cp到带有符号链接的目标层次结构中?

来自分类Dev

包中的层次结构

Related 相关文章

  1. 1

    如何在angularJs指令的链接函数中获取元素标签的坐标

  2. 2

    AngularJS:如何在链接函数中获取指令名称?

  3. 3

    AngularJS:如何在链接函数中获取指令名称?

  4. 4

    AngularJS-指令链接函数中的$ rootScope

  5. 5

    AngularJs指令链接函数中的继承

  6. 6

    angularjs中的层次结构实现

  7. 7

    使用cypress从复杂的层次结构中获取元素

  8. 8

    SQL Server函数获取层次结构中的顶级父级

  9. 9

    AngularJS指令的link()函数中尚未准备好DOM元素

  10. 10

    元素与AngularJS指令中的this

  11. 11

    AngularJS->在DOM完成指令中的元素渲染时捕获

  12. 12

    AngularJs中的嵌套指令不更新View(DOM)元素

  13. 13

    在JavaScript函数中获取HTML DOM元素

  14. 14

    在AngularJs模型的指令的链接函数中设置值

  15. 15

    获取元素的DOM层次结构级别(计数后代级别)

  16. 16

    如何在角度指令中获取当前的dom元素

  17. 17

    如何在角度指令中获取当前的dom元素

  18. 18

    C ++中的虚函数层次结构

  19. 19

    从层次结构中的根获取最远的值

  20. 20

    AngularJS:无法在指令中获取动态元素的innerHTML

  21. 21

    AngularJS指令中的元素高度

  22. 22

    如何在angularjs的指令函数中获取当前的Controller $ scope?

  23. 23

    如何在angularjs的指令函数中获取当前的Controller $ scope?

  24. 24

    AngularJS How:指令的作用域层次结构

  25. 25

    在ngClick指令中获取元素

  26. 26

    $ http不是指令的链接函数中的函数

  27. 27

    指令-修改链接功能中的DOM

  28. 28

    cp到带有符号链接的目标层次结构中?

  29. 29

    包中的层次结构

热门标签

归档