javascript - 查找 Angular Directive(指令)中嵌入的 ng-repeat 子项的数量

Question

我正在尝试查找包含在指令中的子级数量，如下所示:

<div my-directive="true">
  <span ng-repeat="i in [1,2,3,4]>{{i}}</span>
</div>

指令:

angular.module('myModule').directive('myDirective', function() {
  return {
    restrict: 'A',
    transclude: true,
    template: '<canvas></canvas><div class="canvas-overlay"></div>',
    controller: function($element, $transclude) {
      $transclude(function(transcludeEl) {
        $element.find('.canvas-overlay').append(transcludeEl);
      });

      console.log($element.find(".canvas-overlay")[0].children);
   })
 }
});

使用 ng-repeat 时，控制台日志会得到一个空的 html 集合，但当我对跨度进行硬编码时，控制台日志会得到正确的子元素。

上下文:我需要根据 child 的数量设置 Canvas 的高度。

我也尝试过将 Controller 功能更改为链接后功能，但仍然失败。

我做错了什么？

Answer 1

 controller: function($element, $transclude) {
        $transclude(function(transcludeEl) {
           $element.children().eq(1).append(transcludeEl);
 });

我不能.find(".canvas-overlay")，但.children()可以。

https://jsfiddle.net/xtx1nc2k/