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

我创建了a little 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);
    }
}

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

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

使用：

<circle></circle>

Answer 2

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

canvas.getContext不是一个函数

2 个答案: