I have written a simple template for a AngularJs directive:
<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:is not a functioncanvas.getContext
canvas
{
"0": {},
"length": 1,
"prevObject": {
"0": {},
"context": {},
"length": 1
},
"context": {},
"selector": "canvas"
}
I create a little plunker(https://plnkr.co/edit/mOU0ZucRSZzdWxVmTFIZ?p=preview). In your sample i don't understand the relation between directive and template. Have you missing to add template property ? What i do in plunker :
Define template :
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);
}
}
Get canvas from the object that return by find method :
var ctx = canvas[0].getContext('2d');
And the use :
<circle></circle>