input指令
2016-09-14 本文已影响0人
yb_剑笙
概述
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。
代码样例
字符串类型
<!DOCTYPE html>
<html lang="en" ng-app="app">
<!--<html>-->
<head>
<title>Test</title>
</head>
<body>
<form name="myForm" ng-controller="ExampleController">
<div>Single word:
<input type="text" name="inputText" ng-model="example.text" required ng-trim="false">
</div>
<div>URL:
<input type="url" name="inputUrl" ng-model="example.url" required>
<label>
<div role="alert">
<span class="error" ng-show="myForm.inputUrl.$error.required">
Required!</span>
<span class="error" ng-show="myForm.inputUrl.$error.url">
Not valid url!</span>
</div>
</label>
</div>
<div>Email:
<input type="email" name="inputEmail" ng-model="example.email" required>
<div role="alert">
<span class="error" ng-show="myForm.inputEmail.$error.required">
Required!</span>
<span class="error" ng-show="myForm.inputEmail.$error.email">
Not valid email!</span>
</div>
</div>
<label>Pick a date in 2013:</label>
<input type="date" name="inputDate" ng-model="example.date"
placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />
<div role="alert">
<span class="error" ng-show="myForm.inputDate.$error.required">
Required!</span>
<span class="error" ng-show="myForm.inputDate.$error.date">
Not a valid date!</span>
</div>
<label>Pick a date between in 2013:</label>
<input type="datetime-local" name="inputLocal" ng-model="example.local"
placeholder="yyyy-MM-ddTHH:mm:ss" min="2001-01-01T00:00:00" max="2013-12-31T00:00:00" required />
<div role="alert">
<span class="error" ng-show="myForm.inputLocal.$error.required">
Required!</span>
<span class="error" ng-show="myForm.inputLocal.$error.datetimelocal">
Not a valid date!</span>
</div>
<label >Pick a time between 8am and 5pm:</label>
<input type="time" name="inputTime" ng-model="example.time"
placeholder="HH:mm:ss" min="08:00:00" max="17:00:00" required />
<div role="alert">
<span class="error" ng-show="myForm.inputTime.$error.required">
Required!</span>
<span class="error" ng-show="myForm.inputTime.$error.time">
Not a valid date!</span>
</div>
<label>Pick a date between in 2013:
<input type="week" name="inputWeek" ng-model="example.week"
placeholder="YYYY-W##" min="2012-W32"
max="2013-W52" required />
</label>
<div role="alert">
<span class="error" ng-show="myForm.inputWeek.$error.required">
Required!</span>
<span class="error" ng-show="myForm.inputWeek.$error.week">
Not a valid date!</span>
</div>
<label >Pick a month in 2013:</label>
<input type="month" name="inputMonth" ng-model="example.month"
placeholder="yyyy-MM" min="2013-01" max="2013-12" required />
<div role="alert">
<span class="error" ng-show="myForm.inputMonth.$error.required">
Required!</span>
<span class="error" ng-show="myForm.inputMonth.$error.month">
Not a valid month!</span>
</div>
<label>Number:
<input type="number" name="inputNumber" ng-model="example.number"
min="0" max="99" required>
</label>
<div role="alert">
<span class="error" ng-show="myForm.inputNumber.$error.required">
Required!</span>
<span class="error" ng-show="myForm.inputNumber.$error.number">
Not valid number!</span>
</div>
Model as range: <input type="range" name="range" ng-model="example.range" min="{{example.min}}" max="{{example.max}}">
<hr>
Model as number: <input type="number" ng-model="example.range"><br>
Min: <input type="number" ng-model="example.min"><br>
Max: <input type="number" ng-model="example.max"><br>
value = <code>{{example.range}}</code><br/>
myForm.range.$valid = <code>{{myForm.range.$valid}}</code><br/>
myForm.range.$error = <code>{{myForm.range.$error}}</code>
<div>
<label>
<input type="radio" ng-model="color.name" value="red">
Red
</label><br/>
<label>
<input type="radio" ng-model="color.name" ng-value="specialValue">
Green
</label><br/>
<label>
<input type="radio" ng-model="color.name" value="blue">
Blue
</label><br/>
</div>
<div>
<label>Value1:
<input type="checkbox" ng-model="checkboxModel.value1">
</label><br/>
<label>Value2:
<input type="checkbox" ng-model="checkboxModel.value2"
ng-true-value="'YES'" ng-false-value="'NO'">
</label><br/>
</div>
</form>
</body>
<script src="./node_modules/angular/angular.js" type="text/javascript"></script>
<script src="./node_modules/angular-sanitize/angular-sanitize.js" type="text/javascript"></script>
<script>
angular.module('app', [])
.controller('ExampleController', ['$scope', function ($scope) {
$scope.example ={
text: 'guest',
url: 'http://google.com',
email:'me@example.com',
date: new Date(2013, 9, 22),
local:new Date(2010, 11, 28, 14, 57),
time: new Date(1970, 0, 1, 14, 57, 0),
week: new Date(2013, 0, 3),
month: new Date(2013, 9, 1),
number: 12,
range:75,
min:10,
max:90
};
$scope.color = {
name: 'blue'
};
$scope.specialValue = {
"id": "12345",
"value": "green"
};
$scope.checkboxModel = {
value1 : true,
value2 : 'YES'
};
}]);
</script>
</html>
这段代码展示了input指令支持的全部类型的基本使用方式。
