angularjs指令中的简单画布

我被困在（可能是因为一些愚蠢的错误）试图让指令在画布上工作

当我执行代码时，我得到一个

元素。getContext不是一个函数，这看起来很奇怪，因为我的元素实际上是一个HTMLCanvasElement

这是我的指令

.directive('pitchCanvas', function() {

    function link(scope, element, attrs) {
        console.info('element: ' + element);
        var ctx = element.getContext('2d');
        ctx.font = "30px Arial";
        ctx.fillText("Hello World", 10, 50);
    }

  return {
    restrict: 'E',
    replace: true,
    scope: true,
    link: link,
    template: '<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>'
  };
})

指令（'pitchCanvas'，函数（）{
功能链接（范围、元素、属性）{
console.info（'元素：'+元素）；
var ctx=element.getContext（'2d'）；
ctx.font=“30px Arial”；
ctx.fillText（“你好，世界”，10，50）；
}
返回{
限制：'E'，
替换：正确，
范围：正确，
链接：链接，
模板：“”
};
})

这是一个我放了一个简化版本的代码却无法工作的地方

非常感谢您的帮助。

您应该更换：

element.getContext('2d');

与：

---

这是因为元素不是节点，这与使用本机javascript进行查询时得到的结果不同。它实际上是一个jqLite对象（类似于jQuery对象）。因此，就像我们将jquery对象转换为普通javascript对象一样，这也必须转换为使用javascript函数

element[0].getContext('2d');