在JS控制器中編寫指令，如下所示：
.directive('toChange', function($parse) {
return {
link: function (scope, element, attrs, ctrl) {
//控制輸入框只能輸入數字和小數點
function limit(){
var limitV=element[0].value;
limitV=limitV.replace(/[^0-9.]/g,"");
element[0].value=limitV;
$parse(attrs['ngModel']).assign(scope, limitV);
format();
}
//對輸入數字的整數部分插入千位分隔符
function format(){
var formatV=element[0].value;
var array=new Array();
array=formatV.split(".");
var re=/(-?\d+)(\d{3})/;
while(re.test(array[0])){
array[0]=array[0].replace(re,"$1,$2")
}
var returnV=array[0];
for(var i=1;i<array.length;i++){
returnV+="."+array[i];
}
element[0].value=returnV;
$parse(attrs['ngModel']).assign(scope, formatV);
}
scope.$watch(attrs.ngModel,function(){
limit();
})
}
};
})
HTML中，使用指令to-change:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>自學H5</title> <!-- js --> <script type="text/javascript" src="lib/js/angular.min.js" ></script> <script type="text/javascript" src="lib/js/jquery-2.0.0.min.js" ></script> <script type="text/javascript" src="js/indexCtrl.js" ></script> <!-- css --> <script type="text/javascript"> document.addEventListener('plusready', function(){ //console.log("所有plus api都應該在此事件發生后調用，否則會出現plus is undefined。" }); </script> </head> <body ng-app="myApp" ng-controller="indexCtrl"> <div>this在angularJS中不管用，需使用$event</div> <input ng-model="a" to-change/> </body> </html>
該指令只改變輸入框中顯示值樣式（含有千分符），實際取值為金額。