Einfache Leinwand in angularjs Direktive

Question

Ich bin fest (wahrscheinlich auf einige dumme Fehler) versuchen, eine Direktive arbeiten mit einer Leinwand.

Wenn ich meinen Code ausführen, bekomme ich eine element.getContext is not a function, die seltsam scheint, da mein Element tatsächlich ein HTMLcanvasElement ist.

Dies ist meine Richtlinie

.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>' 
    }; 
}) 

und dies ist ein fiddle, wo ich eine vereinfachte Version von meinem Code und KANN NICHT make Arbeit gelegt.

Jede Hilfe wird sehr geschätzt.

Answer 1

sollten Sie ersetzen:

element.getContext('2d'); 

mit:

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