Javascript 在链接函数中无法访问指令模板中使用ng repeat生成画布元素

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

静态画布元素（示例代码中的class/id

c-area

）可以在link函数中访问，因此我获得了一个画布上下文，但由

ng repeat

指令生成的这些元素不可访问

为什么

ng repeat

生成的画布元素实际上/还没有（在DOM中）？在生成的HTML代码中，它们是可见的

为了获得这些画布元素的上下文，必须做/更改什么

[编辑]我找到了这个问题/答案。 这可能是一个解决方案，但在我看来，它更像是一个变通/破解方法，而不是一个好的、干净的解决方案[/Edit]

下面是一个简单的示例，其中包含一些console.log以查看结果

此指令的JS代码：

var-app=angular.module（'canvasGroup'，[]）；
运行（['$templateCache'，函数（$templateCache）{
$templateCache.put（'canvasgroup.tpl.html'，'+
“无画布支持”+
“无画布支持”+
'');
}]);
函数canvasgroupDirectiveController（）{
var ps=此；
ps.groups=[1,2]；
ps.宽度=400；
ps.高度=300；
}
app.directive（'canvasGroup'，function（）{
返回{
限制：'E'，
templateUrl:'canvasgroup.tpl.html'，
控制器：canvasgroupDirectiveController，
控制器：“ps”，
bindToController：{
组：'='
},
链接：函数（范围、元素、属性、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'）；
log（“ctxCanvasArea”，ctxCanvasArea）；//canvasrendingcontext2d{}
var group_1_el=element[0]。getElementsByClassName（'group-1'）；
log（“group_1_el”，group_1_el）；/[]空对象
log（“group_1_el[0]”，group_1_el[0]）；//未定义
var group_1_doc=document.getElementsByClassName（'group-1'）；
console.log（“group_1_doc”，group_1_doc）；/[]空对象
console.log（“group_1_doc[0]”，group_1_doc[0]）；//未定义
//var ctxCanvasGroup=group_1_doc[0]。getContext（'2d'）；//类型错误：无法读取未定义的属性“getContext”
//日志（“ctxCanvasGroup”，ctxCanvasGroup）；
}
}
});

解决方案是将整个链接功能部分包括（“转移”）到

$timeout

功能中，如下所示：

链接：函数（范围、元素、属性、canvasGroupCtrl）{
$timeout（函数（）{
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'）；
log（“ctxCanvasArea”，ctxCanvasArea）；//canvasrendingcontext2d{}
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]）；//
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]）；//
var ctxCanvasGroup=group_1_doc[0]。getContext（'2d'）；
log（“ctxCanvasGroup”，ctxCanvasGroup）；//canvasrendingcontext2d{}
});
}

这是否是一个好的/最好的解决方案？我说不出正确的答案，但它给出了想要的行为。 也许有人有一个更优雅的方法来解决这个问题，或者可以说明上述解决方案的缺点在哪里

---

下面是一个更新的解决方案，它将把整个链接功能部分包含在一个

$timeout

函数中，如下所示：

链接：函数（范围、元素、属性、canvasGroupCtrl）{
$timeout（函数（）{
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'）；
log（“ctxCanvasArea”，ctxCanvasArea）；//canvasrendingcontext2d{}
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]）；//
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]）；//
var ctxCanvasGroup=group_1_doc[0]。getContext（'2d'）；
log（“ctxCanvasGroup”，ctxCanvasGroup）；//canvasrendingcontext2d{}
});
}

这是否是一个好的/最好的解决方案？我说不出正确的答案，但它给出了想要的行为。 也许有人有一个更优雅的方法来解决这个问题，或者可以说明上述解决方案的缺点在哪里

以下是最新的