为什么我的自定义签名板指令没有显示画布？ （没有jQuery）

Question

嗨我正在为angularjs创建一个签名板而不导入jquery，我只是使用了角度使用的jquery lite的元素。我撞墙了，我不知道怎么过去。这是我的代码：

var sig = angular.module('signature', []);

sig.directive("signatureDirective", function () {
    return {
        template: '<canvas id="canvas" width="500" height="100" style="border: 1px solid #ccc;"></canvas>',
        restrict: 'E',
        link: function (scope, element, attrs) {

            var canvas = $(element);  
            var context = canvas.getContext("2d");           
            var clickX = new Array();
            var clickY = new Array();
            var clickDrag = new Array();
            var paint;

            canvas.on("mousedown", mouseDown, false);

            canvas.on("mousemove", mouseXY, false);

            document.body.on("mouseup", mouseUp, false);

            canvas.on("touchstart", mouseDown, false);

            canvas.on("touchmove", mouseXY, true);

            canvas.on("touchend", mouseUp, false);

            canvas.on('touchmove', function (e) {
                pen.x = e.pageX;
                pen.y = e.pageY;
            });

            canvas.on('touchstart', function (e) {
                context.fillRect(pen.x, pen.y, 1, 1);
            });

            canvas.on('mousemove', function (e) {
                pen.x = e.pageX;
                pen.y = e.pageY;
            });

            canvas.on('mousedown', function (e) {
                context.fillRect(pen.x, pen.y, 1, 1);
            });
            context.getImageData();

            document.body.on("touchcancel", mouseUp, false);

            function draw() {
                context.clearRect(0, 0, 500, 100); 

                context.strokeStyle = "#000000";  
                context.lineJoin = "miter";       
                context.lineWidth = 2;            

                for (var i = 0; i < clickX.length; i++) {
                    context.beginPath();                               
                    if (clickDrag[i] && i) {
                        context.moveTo(clickX[i - 1], clickY[i - 1]);  
                    } else {
                        context.moveTo(clickX[i] - 1, clickY[i]);      
                    }
                    context.lineTo(clickX[i], clickY[i]);              
                    context.stroke();                                  
                    context.closePath();                               
                }
            }

            function mouseDown(e) {
                var mouseX = e.pageX - this.offsetLeft;
                var mouseY = e.pageY - this.offsetTop;

                paint = true;
                addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
                draw();
            }

            function addClick(x, y, dragging) {
                clickX.push(x);
                clickY.push(y);
                clickDrag.push(dragging);
            }

            function mouseUp() {
                paint = false;
            }

            function mouseXY(e) {
                if (paint) {
                    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
                    draw();
                }
            }
        }
    };
});

我将它作为元素追加但它没有显示，javascript不会抛出任何异常。有人可以帮忙吗？

Answer 1

我在stackoverflow上找到了一个很棒的answer，一个带有实例的画布绘图指令。

示例：http://plnkr.co/aG4paH

Answer 2

HTML：

<div class="col-md-8" cg-signature>
    <div class="sig sigWrapper">
        <div class="typed"></div>
        <canvas class="pad" width="197" height="52"></canvas>
        <input type="hidden" name="output" class="output">
        <a class="clearButton" href="#">Clear</a>
    </div>
</div>

JavaScript的：

angular.module('YourModuleName')
.directive('directiveName', function() {
     var directive = {};
     directive.restrict = 'A';
     directive.link = function($scope, $ele, $attrs){
          $ele.addClass('sigPad')
          $ele.ready(function() {
          $ele.signaturePad({drawOnly:true});
      });
  };
return directive;
});