javascript - 在链接函数中无法访问指令模板中使用 ng-repeat 生成 Canvas 元素

Question

我正在尝试创建一个 AngularJS 指令，用于动态生成堆叠的 Canvas 元素，一些“静态”元素和一些由索引生成/计数的元素。

静态 Canvas 元素(示例代码中的类/id c-area)可以在链接函数中访问，因此我获得了 Canvas 上下文，但这些元素是由 ng-repeat 生成的。指令不是。

为什么是ng-repeat生成的 Canvas 元素还没有真正存在(在 DOM 中)？在生成的 HTML 代码中它们是可见的。

必须做什么/更改才能获取这些 Canvas 元素的上下文？

[编辑]我找到了这个问题/答案 "Calling a function when ng-repeat has finished" 。这可能是一个解决方案，但在我看来，它更像是一种解决方法/黑客，而不是一个良好而干净的解决方案。 [/编辑]

这是一个plunker通过一些 console.logs 的情况的简化示例来查看结果。

该指令的 JS 代码:

var app = angular.module('canvasGroup', []);

app.run(['$templateCache', function($templateCache) {
  $templateCache.put('canvasgroup.tpl.html', '<div class="canvas-group" style="position:relative">' +
    '<canvas ng-repeat="group in ps.groups" id="group-{{group}}" width="{{ps.width}}" height="{{ps.height}}" class="group group-{{group}}" style="position:absolute;">No canvas support</canvas>' +
    '<canvas id="c-area" class="c-area" width="{{ps.width}}" height="{{ps.height}}" style="position:absolute;">No canvas support</canvas>' +
    '</div>');
}]);

function canvasgroupDirectiveController() {
  var ps = this;
  ps.groups = [1, 2];
  ps.width = 400;
  ps.height = 300;
}


app.directive('canvasGroup', function() {
  return {
    restrict: 'E',
    templateUrl: 'canvasgroup.tpl.html',
    controller: canvasgroupDirectiveController,
    controllerAs: 'ps',
    bindToController: {
      groups: '='
    },
    link: function(scope, element, attrs, canvasGroupCtrl) {

      var canvasArea = document.getElementsByClassName('c-area');
      console.log("canvasArea", canvasArea); // [canvas#c-area.c-area, c-area: canvas#c-area.c-area]
      var ctxCanvasArea = canvasArea[0].getContext('2d');
      console.log("ctxCanvasArea", ctxCanvasArea); // CanvasRenderingContext2D {}

      var group_1_el = element[0].getElementsByClassName('group-1');
      console.log("group_1_el", group_1_el);// [] empty objekt
      console.log("group_1_el[0]", group_1_el[0]); // undefined

      var group_1_doc = document.getElementsByClassName('group-1');
      console.log("group_1_doc", group_1_doc);// [] empty objekt
      console.log("group_1_doc[0]", group_1_doc[0]); // undefined

      //var ctxCanvasGroup = group_1_doc[0].getContext('2d'); // TypeError: Cannot read property 'getContext' of undefined
      //console.log("ctxCanvasGroup", ctxCanvasGroup);

    }
  }
});

Answer 1

解决方案似乎是将整个链接函数部分包含(“嵌入”)到 $timeout 函数中，如下所示:

link: function(scope, element, attrs, canvasGroupCtrl) {
  $timeout(function() {
    var canvasArea = document.getElementsByClassName('c-area');
    console.log("canvasArea", canvasArea); // [canvas#c-area.c-area, c-area: canvas#c-area.c-area]
    var ctxCanvasArea = canvasArea[0].getContext('2d');
    console.log("ctxCanvasArea", ctxCanvasArea); // CanvasRenderingContext2D {}

    var group_1_el = element[0].getElementsByClassName('group-1');
    console.log("group_1_el", group_1_el); // HTMLCollection[canvas#group-1.group.group-1]
    console.log("group_1_el[0]", group_1_el[0]); // <canvas id="group-1" class="group group-1" style="position:absolute;" height="300" width="400" ng-repeat="group in ps.groups">

    var group_1_doc = document.getElementsByClassName('group-1');
    console.log("group_1_doc", group_1_doc); // HTMLCollection[canvas#group-1.group.group-1]
    console.log("group_1_doc[0]", group_1_doc[0]); // <canvas id="group-1" class="group group-1" style="position:absolute;" height="300" width="400" ng-repeat="group in ps.groups">

    var ctxCanvasGroup = group_1_doc[0].getContext('2d');
    console.log("ctxCanvasGroup", ctxCanvasGroup); // CanvasRenderingContext2D {}
  });
}

这是一个好的/最好的解决方案吗？我不能告诉正确的知道，但它给出了想要的行为。也许有人有更优雅的方法来解决这个问题，或者可以展示上述解决方案的一些缺点？

这是更新的plunker