JarCastingThis plugin only works for AngularJS 1.x
Angular Signature
AngularJS directive for the signature pad JavaScript library by szimek.
In contrast to other AngularJS directives for szimek's signature pad, this directive does not apply any styling. The directive only places the canvas and allows you to bind your app to the signature pad by binding the functions in the scope of your controller. This means you can call them from your own (custom) buttons.
Demo
An online demo of the directive can be found here.
Installation
Install this module using bower
bower install angular-signature --save
or install this module using npm
npm install angular-signature --save
Add the module to your app
angular.module('app', [
'signature',
]);
Usage
Basics
<signature-pad accept="accept" clear="clear" height="220" width="568" disabled="false"></signature-pad>
<button ng-click="clear()">Clear signature</button>
<button ng-click="signature = accept()">Sign</button>
Bootstrap Modal
This plugin works well in a Angular UI Bootstrap Modal.
angular.module('app').controller('SignModalCtrl', [
'$scope', '$modalInstance'
function ($scope, $modalInstance) {
$scope.done = function () {
var signature = $scope.accept();
if (signature.isEmpty) {
$modalInstance.dismiss();
} else {
$modalInstance.close(signature.dataUrl);
}
};
}
]);
<div class="modal-header">
<h3 class="modal-title">Sign</h3>
</div>
<div class="modal-body">
<signature-pad accept="accept" clear="clear"></signature-pad>
</div>
<div class="modal-footer">
<button class="btn btn-default pull-left" ng-click="clear()">Clear signature</button>
<button class="btn btn-default" ng-click="$dismiss()">Cancel</button>
<button class="btn btn-primary" ng-click="done()">Sign</button>
</div>
