jSignature + Angular

by Timothy Wood

HTML

<script src="https://cdn.rawgit.com/brinley/jSignature/master/libs/jSignature.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
<h2>Signature Test</h2>
<div ng-controller="SignatureController">
    <div>items length: {{items.length}}</div>
    <img ng-src="{{hash}}" alt="signature image" />
    <j-signature-directive sig="customSignature" save="testAction" bg-color="#00f" color="#ffcc00"></j-signature-directive>
</div>

JavaScript

var myApp = angular.module('myApp',[])

.directive('jSignatureDirective', function() {
    return {
        restrict: 'E',
        template: '<div id="signature"><div id="jSignature"></div><button ng-click="reset()">reset</button><button ng-click="getData()">getData</button><button ng-click="setData()">setData</button></div>',
        scope: {
            sig: '=',
            width: '@',
            height: '@',
            color: '@',
            bgColor: '@',
            lineWidth: '@',
            cssclass: '@',
            save: '='
        },
        link: function($scope, $element) {

            console.log('jSignatureDirective: link');
            console.dir($scope, $element);

            $scope.initialized = false;

            var options = {
                width: $scope.width,
                height: $scope.height,
                color: $scope.color,
                'background-color': $scope.bgColor,
                lineWidth: $scope.lineWidth,
                cssclass: $scope.cssclass
            };

            $scope.initialize = function() {
                if (!$scope.initialized) {
$element.find('#jSignature').jSignature(options);
                    $scope.initialized = true;
                }
            };

            $scope.reset = function() {
                console.log('reset!!!');
                $element.jSignature('reset');
            };

            $scope.getData = function() {
                console.log('getData!!!');
                var datapair = $element.jSignature('getData', 'base30');
                var svg = $element.jSignature('getData', 'svg');
                console.dir(datapair);
                //alert(datapair);
                  //              alert(svg);
                $scope.save(svg);
            };

            $scope.setData = function(sig) {
                console.log('setData!!!');
                
                

                if (sig) {
                    datapair = sig;
                }
    ...