AngularJS'de özel bir tuval yönergesiyle çalışma hiçbir şey göstermiyor

Question

Tuval üzerine kurulu özel bir AngularJS 1 yönergesi yapıyorum. Ama tuval üzerine resim çiziyorum dikdörtgen göremiyorum: Burada

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

     } 
    }; 
    }); 

burada my plunker live preview

Answer 1

Sorun Olmaya dom oluşturulması tamamlandığında önce fillRect aradığınız olmasıdır. Bunun için zaten StackOverFlow üzerinde bir iş parçacığı var.

$timeout numaralı telefonu drawBackground numaralı telefona sıfır gecikmeyle aramanızı rica ediyoruz.

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

Ve ayrıca yönergede $ aşımını enjekte etmeyi unutmayın:

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

ayrıntılı scope.sizeNaN olduğunu. Bu değeri html gibi bir değerin verebileceğini belirtin.

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