angularjs利用directive實現(xiàn)移動端自定義軟鍵盤的示例

angular.module('ng-calculator', []).directive('calculator', ['$compile',function($compile) {
 return {
 restrict : 'A',
 replace : true,
 transclude : true,
 template:'<input/>',

 link : function(scope, element, attrs) {
 var keylist=[1,2,3,4,5,6,7,8,9,0,'.'];
 var calculator = '<div class="ngcalculator_area"><div class="bg"></div>'
 +'<div class="calculator">'
 +'<div class="title close">'+attrs.title+'</div><div class="inputarea">'
 +'<input type="text" id="text" ng-tap="getInput()" class="'+attrs.class+'" ng-model="' +attrs.ngModel+'">'
 +'</div><div class="con">'
 +'<div class="left">';
 $.each(keylist,function(k,v){
 calculator += '<div class="keyboard num" value="'+v+'">'+v+'</div>';
 });

 calculator += '</div>'
 +'<div class="right">'
 +'<div class="keyboard blueIcon backstep"></div>'
 +'<div class="keyboard blueIcon cleanup">清空</div>'
 +'<div class="keyboard ensure ensure">確<br>定</div>'
 +'</div>'
 +'</div>'
 +'</div>'
 +'</div>';
 calculator = $compile(calculator)(scope);
 element.bind('focus',function(){
 document.body.appendChild(calculator[0]);
 document.activeElement.blur();
 });

 $(calculator[0]).find("input").focus(function(){
 document.activeElement.blur();
 });
 //關(guān)閉模態(tài)框
 $(calculator[0]).find(".close").click(function(){
 calculator[0].remove();
 var callback = attrs.callback;
 if(typeof callback!="undefined"){
 scope[callback]();
 }
 });
 $(calculator[0]).find(".bg").click(function(){
 calculator[0].remove();
 });
 //退格
 $(calculator[0]).find(".backstep").click(function(){
 if(typeof $(calculator[0]).find("input").val()=="undefined"){
 $(calculator[0]).find("input").val("");
 }
 $(calculator[0]).find("input").val($(calculator[0]).find("input").val().substring(0,$(calculator[0]).find("input").val().length-1)).trigger('change');
 });
 //清空
 $(calculator[0]).find(".cleanup").click(function(){
 $(calculator[0]).find("input").val("").trigger('change');
 });
 //點擊數(shù)字
 $(calculator[0]).find(".num").click(function(){
 var val = $(calculator[0]).find("input").val();
 var filter = attrs.filter;
 if(typeof filter!="undefined"){
 val = scope[filter](val,$(this).attr("value"));
 }else{
 val = val+''+$(this).attr("value");
 }
 $(calculator[0]).find("input").val(val).trigger('change');
 });
 //確認
 $(calculator[0]).find(".ensure").click(function(){
 calculator[0].remove();
 var callback = attrs.callback;
 if(typeof callback!="undefined"){
 scope[callback]();
 }
 });
 //點擊效果
 $(calculator[0]).find(".keyboard").click(function(){
 $(this).addClass("keydown");
 var that = this;
 setTimeout(function(){
 $(that).removeClass("keydown");
 },100)
 });
 var position = {
 startX:0,
 startY:0
 };
 calculator[0].getElementsByClassName("title")[0].addEventListener('touchstart', function(e) {
 e.preventDefault();
 var transform = $(calculator[0]).find(".calculator").css("transform").match(/translate\((.*),(.*)\)/);
 if(transform==null){
 position.startX = e.targetTouches[0].clientX;
 position.startY = e.targetTouches[0].clientY;
 }else{
 position.startX = e.targetTouches[0].clientX-parseInt(transform[1]);
 position.startY = e.targetTouches[0].clientY-parseInt(transform[2]);
 }
 }, false);
 calculator[0].getElementsByClassName("title")[0].addEventListener('touchmove', function(e) {
 e.preventDefault();
 var moveX = e.targetTouches[0].clientX-position.startX;
 var moveY = e.targetTouches[0].clientY-position.startY;
 $(calculator[0]).find(".calculator").css("transform","translate("+moveX+"px,"+moveY+"px)");
 }, false);
 }
 };
}]);

<input type="text" placeholder="按價格搜索" ng-model="spaAndHairSeaInPrice" title="按價格搜索" calculator>