Signature Pad

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write("<base href=\"" + document.location + "\" />");</script>
  <link rel="stylesheet" href="style.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="http://static.thomasjbradley.ca/signature-pad/jquery.signaturepad.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
  <script src="sigpad.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <form name="sigform" class="form-inline sigform" ng-submit="saveSignatureForm()">

  <!-- Name Field -->
  <div class="control-group">
    <div class="control">
      <label class="control-label">Name:</label>
      <input type="text" name="firstName" class="input-small" placeholder="First Name" ng-model="user.firstName" required>
      <input type="text" name="lastName" class="input-small" placeholder="Last Name" ng-model="user.lastName"> 
    </div>
  </div>

  <!-- Signature Pad -->
  <div class="control-group">
    <sigpad ng-model='user.signature' name="signature" required></sigpad>
    <p>draw your signature on the line above.</p>
  </div>
  <input type="button" value="Clear" ng-click="clearData()" ng-disabled="sigform.$pristine" />
  <input type="submit" value="Save" class='btn btn-primary' ng-disabled="sigform.$invalid"  />
</form>
</body>

</html>

var app = angular.module('plunker', ['sigpad']);

app.controller('MainCtrl', function($scope) {
    $scope.user = {
      firstName: null,
      lastName: null,
      signature: null
    };
    
    $scope.saveSignatureForm = function() {
      if ( sigform.$valid ) {
        console.log('Saving ', $scope.user);
        $scope.clearData();
      }
    };
    
    $scope.clearData = function() {
      $scope.user = {
        firstName: null,
        lastName: null,
        signature: null
      };
    };
    
    $scope.clearData();
});

angular.module('sigpad',[]).directive('sigpad', function($timeout){
  return {
    templateUrl: 'sigPad.html',
    restrict: 'E',
    scope : true,
    require: 'ngModel',
    link: function (scope,element,attr,ctrl) {
      var sigPadAPI = $(element).signaturePad({
                                  drawOnly:true //,
                                  //validateFields:false //Removing this will fire the sigpad validation on form submit, but will not stop the form from submitting.
                                });
                                
      scope.updateModel = function() {
        $timeout(function() {
          console.log('updateModel', scope);
          ctrl.$setViewValue(sigPadAPI.getSignature());
        });
      };      
      
      ctrl.$render = function() {
        console.log('render', ctrl.$viewValue);
        if ( ctrl.$viewValue ) {
          sigPadAPI.regenerate(ctrl.$viewValue);
        } else {
        sigPadAPI.clearCanvas();
        }
      };
      
      // Validate signature pad.
      // This isn't working. From what I can tell, the code never gets touched.
      ctrl.$parsers.unshift(function(viewValue) {
        console.log('validating', viewValue);
        if ( sigPadAPI.validateForm() ) {
          // it is valid
          console.log('valid');
          ctrl.$setValidity('sigpad', true);
          return viewValue;
        } else {
          // it is invalid, return undefined (no model update)
          console.log('invalid');
          ctrl.$setValidity('sigpad', false);
          return undefined;
        }
      });      
      
    }
  };
});

<div class="control sigPad">
  <div class="sig sigWrapper">
    <canvas class="pad" width="198" height="55" ng-mouseup="updateModel()"></canvas>
  </div>
</div>

/* Put your css in here */

.error {
  border: solid 1px red;
  }