🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

angular-signature

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular-signature

HTML5 canvas based smooth signature drawing as angularJS directive

1.0.3
latest
Source
npm
Version published
Maintainers
1
Created
Source

Angular Signature

Scrutinizer Code Quality

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.

sign animation

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>

Keywords

angular

FAQs

Package last updated on 05 May 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts