基于angularJs1.x的h5 签名

最近应公司要求做了一个h5的电子签名，废话不多说，直接上代码

<!--HTML部分-->
<script src="lib/jquery.1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/jq-signature.js" type="text/javascript" charset="utf-8"></script>
<div class="js-signature"
	         data-width="600"
	         data-height="200"
	         data-border="1px solid #1ABC9C"
	         data-background="#16A085"
	         data-line-color="#000"
	         data-auto-fit="true" 
	         data-line-width="5">
	    </div>
	    <button id="clearBtn" ng-click="clearCanvas();">清空签名</button>
	    <button id="saveBtn" ng-click="saveSignature();" disabled>保存签名</button>
	    <div id="signature"></div>

//js部分
$(function(){
$('.js-signature').jqSignature();
});	
	    $scope.clearCanvas=function() {
	        $('#signature').html('<p><em>Your signature will appear here when you click "Save Signature"</em></p>');
	        $('.js-signature').jqSignature('clearCanvas');
	        $('#saveBtn').attr('disabled', true);
	    }
	    $scope.saveSignature=function() {
	        $('#signature').empty();
	        var dataUrl = $('.js-signature').jqSignature('getDataURL');
	        var img = $('<img>').attr('src', dataUrl);
	        $('#signature').append($('<p>').text("Here's your signature:"));
	        $('#signature').append(img);
	    }
	    $('.js-signature').on('jq.signature.changed', function() {
	        $('#saveBtn').attr('disabled', false);
	    });

效果如下：