在链接功能中无法访问的指令模板中使用 ng-repeat 生成画布元素答案

【问题标题】：Generating canvas elements with ng-repeat in directive template not accessible in link function在链接功能中无法访问的指令模板中使用 ng-repeat 生成画布元素
【发布时间】：2016-01-26 01:19:28
【问题描述】：

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

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

为什么ng-repeat 生成的画布元素不是真的/还没有（在 DOM 中）？在生成的 HTML 代码中它们是可见的。

要获得这些画布元素的上下文，必须做什么/改变什么？

[编辑]我找到了这个问题/答案"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);

    }
  }
});

【问题讨论】：

标签： javascript angularjs canvas ng-repeat directive

【解决方案1】：

解决方案是将整个链接功能部分包含（“transclude”）到$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

【讨论】：