<!doctype html> <html ng-app="form-example1"> <head> <script src="https://code.angularjs.org/angular-1.0.2.min.js"></script> <script> var app = angular.module('form-example1', []); var INTEGER_REGEXP = /^\-?\d+$/; //或者以"-"（负）开头，或者没有负号，后面都是正整数，包括0 app.directive('integer', function() { return { require: 'ngModel', //依赖nogModel指令 link: function(scope, elm, attrs, ctrl) { ctrl.$parsers.unshift(function(viewValue) { //ctrl可以调用ngModel指令中controller函数中定义的方法 if (INTEGER_REGEXP.test(viewValue)) { ctrl.$setValidity('integer', true); return viewValue; } else { ctrl.$setValidity('integer', false); return undefined; } }); } }; }); var FLOAT_REGEXP = /^\-?\d+((\.|\,)\d+)?$/; //可以是正负，可以是整数，也可以是浮点数，浮点数可以用"."分开，也可以用","分开。 app.directive('smartFloat', function() { return { require: 'ngModel', link: function(scope, elm, attrs, ctrl) { ctrl.$parsers.unshift(function(viewValue) { if (FLOAT_REGEXP.test(viewValue)) { ctrl.$setValidity('float', true); return parseFloat(viewValue.replace(',', '.')); } else { ctrl.$setValidity('float', false); return undefined; } }); } }; }); </script> </head> <body> <div ng-controller="Controller"> <form novalidate> <div> Size (integer 0 - 10): <input type="number" ng-model="size" min="0" max="10" integer />{{size}}<br /> //integer，自定义指令 <span ng-show="form.size.$error.integer">This is not valid integer!</span> <span ng-show="form.size.$error.min || form.size.$error.max">The value must be in range 0 to 10!</span> </div> <div> Length (float): <input type="text" ng-model="length" smart-float />{{length}}<br /> //smart-float，自定义指令 <span ng-show="form.length.$error.float">This is not a valid float number!</span> </div> </form> </div> </body> </html>
上面的例子中，我们创建了两个指令。
第一个指令是要验证输入的是否是整数。例如，1.23就不符合验证的值，因为它包含了分数部分。
第二个指令是要验证输入的是否是“智能浮点(smart-float)”。它能把"1.2"或者"1,2"都转化为合法的浮点数"1.2"。注意，这里我们不能使用input元素的type="number"，因为支持HTML5的浏览器不允许用户输入像"1,2"这样的非法值。
AngularJS已经实现了所有基本的HTML表单控件（input,select,textarea），对于大部分情况应该已经够了。但是，你还是可以通过写指令来实现你自己的表单控件。
要和ngModel指令协同工作实现自定义控件，并且实现双向绑定的话，需要：
实现render方法。这个方法负责在数据模型变化时，把变化的值传递给NgModelController#$formatters后，用来在view上渲染新的数据。
在用户与控件交互并且模型需要被更新时，调用$setViewValue方法。这通常是在DOM的监听事件中完成的。
下面的例子演示了如何添加一个“内容可编辑”的数据双向绑定的元素。