概述
Angular js的input指令是对html中的input元素的一个封装，Angular js中的input指令使得input的功能更加丰富，完善。input元素是一个具有多种类型，如：button，text等。Angular js的input指令只对其中一部分类型进行了封装，有五种类型是直接使用的html的input元素，任何Angular js无法识别的类型都会默认使用text类型进行处理。
Input指令对于各种类型的处理情况：
| 类型 | 是否封装 |
|---|---|
| text | 是 |
| date | 是 |
| datetime-local | 是 |
| time | 是 |
| week | 是 |
| month | 是 |
| number | 是 |
| url | 是 |
| 是 | |
| radio | 是 |
| range | 是 |
| checkbox | 是 |
| hidden | 否 |
| button | 否 |
| submit | 否 |
| reset | 否 |
| file | 否 |
详细说明
各种类型的公共部分
input指令在对每一种type进行处理的时候都会预先进行基本操作，这个操作主要是进行事件监听等工作。其中重点有：
1、对于android系统，会监听compositionstart和compositionend消息，这两个消息是在使用输入法输入时惨的。接到start消息就会停止对input的处理，接到end消息后就会开始对input的处理。
2、Angular会监听input消息，如果没有input消息就会监听keydown、paste、cut消息，然后进行相应的处理。
3、对于date,datetime-local,month,time,week这些类型，如果直接改变了validity，是无法及时响应的，这是由于validity的变化不一定会发送input或change消息，所以对于这些类型增加了一个监听keydown wheel mousedown的消息，在这些消息处理过程中判断validity是否有改变，如果改变了就进行相应的处理。
公共处理部分的核心，所有的事件监听都是为了这个部分：
var listener = function(ev) {
if (timeout) {
$browser.defer.cancel(timeout);
timeout = null;
}
if (composing) return;
var value = element.val(),
event = ev && ev.type;
// By default we will trim the value
// If the attribute ng-trim exists we will avoid trimming
// If input type is 'password', the value is never trimmed
if (type !== 'password' && (!attr.ngTrim || attr.ngTrim !== 'false')) {
value = trim(value);
}
// If a control is suffering from bad input (due to native validators), browsers discard its
// value, so it may be necessary to revalidate (by calling $setViewValue again) even if the
// control's value is the same empty value twice in a row.
if (ctrl.$viewValue !== value || (value === '' && ctrl.$$hasNativeValidators)) {
ctrl.$setViewValue(value, event);
}
};
这个消息响应的方法主要做的事情：
1、各种输入判断，如果composing状态如果为true，就不处理。
2、输入的值的预处理。
3、把input的值设置到view上去。
各种不同类型的处理过程
文本类型
text
text为基本类型，没有进行过多的处理，只是直接把输入的值设置到元素上去。
url
url会在text的基础上再增加一个url验证器的设置，主要是验证url有效性的时候使用。
email和url类似，相对于text增加了一个email的验证器。
日期
日期类型主要包括：date，datetime-local，time，week，month。
所有的日期类型的input指令都有一个共同的部分：日期解析。除了week类型外，其它都是使用同一个函数：createDateParser，该函数会返回一个函数，在这个函数中会进行日期解析，日期解析的核心代码：
regexp.lastIndex = 0;
parts = regexp.exec(iso);
if (parts) {
parts.shift();
if (date) {
map = {
yyyy: date.getFullYear(),
MM: date.getMonth() + 1,
dd: date.getDate(),
HH: date.getHours(),
mm: date.getMinutes(),
ss: date.getSeconds(),
sss: date.getMilliseconds() / 1000
};
} else {
map = { yyyy: 1970, MM: 1, dd: 1, HH: 0, mm: 0, ss: 0, sss: 0 };
}
forEach(parts, function(part, index) {
if (index < mapping.length) {
map[mapping[index]] = +part;
}
});
return new Date(map.yyyy, map.MM - 1, map.dd, map.HH, map.mm, map.ss || 0, map.sss * 1000 || 0);
}
这段代码中主要的工作：
1、时间日期的解析，正则表达式regexp作为参数传入。
/^(\d{4,})-(\d{2})-(\d{2})$/ \\date
/^(\d{4,})-(\d\d)-(\d\d)T(\d\d):(\d\d)(?::(\d\d)(\.\d{1,3})?)?$/ \\datetime-localb
/^(\d{4,})-(\d\d)$/ \\month
/^(\d\d):(\d\d)(?::(\d\d)(\.\d{1,3})?)?$/ \\time
2、新建一个时间对象，如果传入了默认值，就会复制默认值，如果没有传入，就指定为1970-01-01 00:00:00。
3、把解析到的数据拷贝的相应的位置上。
日期类型都具有最大值和最小值控制，可以使用ng-max、max或者ng-min、min指定。
数值类型
数值类型主要有：number和range，他们两的功能几乎是一模一样的。
数值类型主要是增加了一些属性的处理，包括：ng-max，ng-min，max，min，step。
其中需要说明的是step属性，其处理代码：
if (isDefined(attr.step) || attr.ngStep) {
var stepVal;
ctrl.$validators.step = function(modelValue, viewValue) {
return ctrl.$isEmpty(viewValue) || isUndefined(stepVal) || viewValue % stepVal === 0;
};
attr.$observe('step', function(val) {
stepVal = parseNumberAttrVal(val);
// TODO(matsko): implement validateLater to reduce number of validations
ctrl.$validate();
});
}
可以看出当定义了step属性，或者ng-step属性的时候，number的值必须是step的整数倍。同事还会监控tep属性，目前当发现step变化时只是简单的再次判断是否有效。
单选框类型
对于单选框radio类型，input指令主要做的工作：
1、如果没有定义name属性，就添加一个name属性，使用调用angualr的nextUid方法得到name的值。
2、监听click事件和value变化事件，然后处理。
复选框类型
对于复选框checkbox类型，input指令主要增加了ng-true-value和ng-false-value属性。通过这两个属性可以指定自定义的true和false，如：Yes和No等，理论上可以为任何值。如果input的value等于ng-true-value的值就是选中，否则就是补选中。如果没有设置这两个属性，ng-true-value = true，ng-false-alue= false。
代码样例
字符串类型
Test
这段代码展示了input指令支持的全部类型的基本使用方式。