[AngularJS]自定义canvas指令及在 angularJS 的工作并不显示任何东西

发布时间: 2017/4/16 11:19:25
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我建立一个自定义的 AngularJS 1 指令,基于一个canvas。但我不能看到我在画在canvas的矩形︰

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

      }
    };
  });

这里是我的呆瓜实时预览

解决方法 1:

这里的问题是你调用 fillRect dom 已完成呈现之前。已存在一个线程在计算器上的。

包你打电话到 drawBackground$timeout 零滞。

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

和也别忘了来注入你的指令中的 $timeout:

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

进一步 scope.sizeNaN 。给它一个值可能是在 html 中像这样

<chess-diagram size="100"></chess-diagram>
官方微信
官方QQ群
31647020