帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:Directive  Html5  SMO  HTTP  angular  Canvas  CAN  Angularj指令  
HTML5 canvas based smooth signature drawing as angularJS directive (http://szimek.github.io/signature_pad/)

  • 源代码名称:angular-signature
  • 源代码网址:http://www.github.com/legalthings/angular-signature
  • angular-signature源代码文档
  • angular-signature源代码下载
  • Git URL:
    git://www.github.com/legalthings/angular-signature.git
  • Git Clone代码到本地:
    git clone http://www.github.com/legalthings/angular-signature
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/legalthings/angular-signature
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • Angular 签名

    Scrutinizer Code Quality

    针对签名pad的AngularJS指令,通过实现了JavaScript库。

    与其他用于 szimek pad签名的AngularJS指令相反,这里指令不应用任何样式。 指令只放置画布,并允许你通过绑定控制器范围内的函数将应用绑定到签名垫。 这意味着你可以从自己的( 自定义) 按钮调用它们。

    sign animation

    演示

    这条指令的在线演示可以在这里找到,。

    安装

    使用 Bower 安装这里模块

    bower install angular-signature --save

    或者使用 npm安装这里模块

    npm install angular-signature --save

    将模块添加到应用程序中

    angular.module('app', [
     'signature',
    ]);

    用法

    基本

    <signature-padaccept="accept"clear="clear"height="220"width="568"disabled="false"></signature-pad>
    <buttonng-click="clear()">Clear signature</button>
    <buttonng-click="signature = accept()">Sign</button>

    Bootstrap 模式

    这个插件在 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);
     }
     };
     }
    ]);
    <divclass="modal-header">
     <h3class="modal-title">Sign</h3>
    </div>
    <divclass="modal-body">
     <signature-padaccept="accept"clear="clear"></signature-pad>
    </div>
    <divclass="modal-footer">
     <buttonclass="btn btn-default pull-left"ng-click="clear()">Clear signature</button>
     <buttonclass="btn btn-default"ng-click="$dismiss()">Cancel</button>
     <buttonclass="btn btn-primary"ng-click="done()">Sign</button>
    </div>


    文章标签:angular  HTTP  DIR  Html5  CAN  Directive  Canvas  SMO  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语