canvas.getContext不是一个函数

Question

我为AngularJS指令写了一个简单的模板：

<div class="circle">
    <canvas></canvas>
</div>

我的指示具有以下外观：

MobileApp.directive('circle', function () {
    return {
        restrict: 'E',
        scope: true,
        link: function (scope, elem, attrs) {
            ...
            var canvas = elem.find('canvas');
            var ctx = canvas.getContext('2d');
            ...
        }
    }
});

的用法很简单：

<circle/>

尝试调用方法getContext('2d')时会遇到错误：

TypeError：canvas.getContext不是函数

选择了canvas实例，其JSON表示形式看起来

{
  "0": {},
  "length": 1,
  "prevObject": {
    "0": {},
    "context": {},
    "length": 1
  },
  "context": {},
  "selector": "canvas"
}

我已经在此处阅读了所有相关问题，但是尚未找到答案。任何帮助，将不胜感激。谢谢。

Answer 1

我创建了一个小的plunker。在您的样本中，我不了解指令和模板之间的关系。您是否缺少添加模板属性？我在plunker中做什么：

定义模板：

return {
    restrict: 'E',
    scope: true,
    template: '<div><canvas></canvas></div>',
    link: function (scope, elem, attrs) {
        var canvas = elem.find('canvas');
        console.log(canvas);
        var ctx = canvas[0].getContext('2d');
        console.log(canvas, ctx);
    }
}

从查找方法返回的对象中获取画布：

var ctx = canvas[0].getContext('2d');

和使用：

<circle></circle>

Answer 2

替换var canvas = elem.find('canvas');由var canvas = elem.find('canvas')[0];