https://github.com/legalthings/angular-signature

HTML5 canvas based smooth signature drawing as angularJS directive (http://szimek.github.io/signature_pad/)
https://github.com/legalthings/angular-signature

Last synced: 2 months ago
JSON representation

HTML5 canvas based smooth signature drawing as angularJS directive (http://szimek.github.io/signature_pad/)

• Host: GitHub
• URL: https://github.com/legalthings/angular-signature
• Owner: legalthings
• License: mit
• Archived: true
• Created: 2015-05-12T12:38:18.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2019-11-18T10:19:00.000Z (about 5 years ago)
• Last Synced: 2024-10-05T23:30:47.024Z (3 months ago)
• Language: JavaScript
• Size: 38.1 KB
• Stars: 105
• Watchers: 25
• Forks: 91
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-canvas - angular-signature - HTML5 canvas based smooth signature drawing as angularJS directive.   (Libraries / Signature pad)

README

        
**This plugin only works for AngularJS 1.x**

# Angular Signature

[![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/legalthings/angular-signature/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/legalthings/angular-signature/?branch=master)

AngularJS directive for the [signature pad](https://github.com/szimek/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](https://cloud.githubusercontent.com/assets/100821/11911005/77b3e2fe-a5de-11e5-9221-cfaafb737cd7.gif)

## Demo

An online demo of the directive can be found [here](https://rawgit.com/legalthings/angular-signature/master/demo/index.html).

## 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

```html

Clear signature

Sign

```

### Bootstrap Modal

This plugin works well in a [Angular UI Bootstrap Modal](https://angular-ui.github.io/bootstrap/#/modal).

```js

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);

      }

    };

  }

]);

```

```html



    
Sign





    





    Clear signature

    Cancel

    Sign



```