Page 60 - AngularJS权威教程

40 第 7 章 过滤器

<label>Your name</label>
<input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=
3 ng-maxlength=20 required />
<div class="error" ng-messages="signup_form.name.$error">
<div ng-message="required">Make sure you enter your name</div>
<div ng-message="minlength">Your name must be at least 3 characters</div>
<div ng-message="maxlength">Your name cannot be longer than 20 characters</div>
</div>
<button type="submit">Submit</button>
</form>
借助ngMessages，表本身比前面的实现更清洁，并且更好理解。

然而对于这个实现，一次只会显示一个错误消息。如果我们想要更新这个实现同时显示所有
的错误将会怎样？很容易。只需在ng-message指令旁边使用ng-messages-multiple属性即可。

<div class="error" ng-messages="signup_form.name.$error" ng-messages-multiple>
<div ng-message="required"> sure you enter your name</div>
<div ng-message="minlength">Your name must be at least 3 characters</div>
<div ng-message="maxlength">Your name cannot be longer than 20 characters</div>
</div>

很多时候这些信息相互之间非常相似。我们可以将它们保存到模板中从而减少麻烦，而不是
重新输入每个字段的错误信息。

<!-- In templates/errors.html -->
<div ng-message="required">This field is required</div>
<div ng-message="minlength">The field must be at least 3 characters</div>
<div ng-message="maxlength">The field cannot be longer than 20 characters</div>
然后我们可以通过在视图中使用ng-messages-include属性引入这个模板来改进这个表单：

<div class+'error' ng-messages="signup_form.name.$error"
ng-messages-include="templates/errors.html">
</div>
有时，你可能希望为不同的字段自定义错误信息。没问题，你可以在这个指令内简单地插入
一个自定义错误信息。由于ngMessages涉及ngMessages容器中错误列表的顺序，我们可以通过
在这个指令中列出自定义错误信息的方式覆盖它们。

<div class="error" ng-messages="signup_form.name.$error"
ng-messages-include="templates/errors.html">
<!--
除了minlength会被覆盖之外，其他每个信息都会保持不变
-->
</div>
此外，甚至还可以为自定义验证创建自定义消息。可以通过修改模型的 $ parsers链做到这
一点。
例如，比方说我们想要创建一个自定义验证器验证用户名在一个注册表单中是否有效：

app.directive('ensureUnipue', function($http) {
return {
require: 'ngModel',
link: function(scope, ele, attrs, ctrl) {

ctrl.$parsers.push(function(val) {