angularJSのカスタムキャンバスディレクティブを使用しても何も表示されません

Question

キャンバスに基づいてカスタムのAngularJS 1ディレクティブを作成しています。しかし、私はキャンバス上に描画しています長方形を見ることができない。ここで

angular.module('loloof64.chess_diagram', []) 
    .directive('chessDiagram', function() { 
    return { 
     restrict: "E", 
     template: '<canvas width="{{size}}" height="{{size}}"></canvas>', 
     scope: { 
     size: '@' 
     }, 
     compile: function(element, attrs) { 

     drawBackground = function(scope, canvasCtx) { 
      canvasCtx.fillStyle = "#DD55CC"; 
      canvasCtx.fillRect(0, 0, scope.size, scope.size); 
     }; 


     return function(scope, element, attrs) { 
      scope.size = scope.size - scope.size % 9; 
      scope.cellSize = Math.floor(scope.size/9); 
      canvas = element[0].children[0]; 
      ctx = canvas.getContext("2d"); 
      drawBackground(scope, ctx); 
     }; 

     } 
    }; 
    }); 

はここmy plunker live preview

Answer 1

問題であるDOMは、レンダリングが完了する前に、あなたがfillRectを呼び出しているということです。これには既にStackOverFlowにスレッドがあります。

drawBackgroundに電話をかけ、$timeout以内にゼロ遅延を付けます。

$timeout(function() { 
    drawBackground(scope, ctx); 
}); 

そしてまたあなたのディレクティブで$タイムアウトを注入することを忘れないでください：

.directive('chessDiagram', function($timeout) { 

さらにscope.sizeはNaNです。値をHTMLのように入力してください。

<chess-diagram size="100"></chess-diagram>