貌似新公司用的angular2，让我这种1都没啃好的渣渣肿么搞，就不更新那个angular知识点汇总了，一个个知识点铺开来记吧QAQ

从实例来记

校验个邮箱

1
2
3
4
5
6
7
8
9
10
11
<form action="" name="userform" novalidate="novalidate">
        <div class="form-group" ng-class="{'has-error':userform.email.$invalid && userform.email.$dirty}">
            <label for="email" class="control-label">email:</label>
            <input type="email" name="email" id="email" class="form-control" ng-model="user.email" ng-minlength="3">
        </div>
        <p class="help-block" ng-show="userform.$error.email">输入的邮箱格式不规范</p>
        <p class="help-block" ng-show="userform.$error.minlength">输入长度不满足条件</p>
</form>
<pre>
    {{userform | json}}
</pre>

把userform的值打印出来，email是我们自定义的name是email的文本框的对象（name是什么这个对象的key就是什么），上面那些$的是表单对象自带的，$error是表单中的错误的校验，$dirty描述表单是否”脏“了，$pristine是它的相反，$valid是描述表单是否都合规定，$invalid反之

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
  "$error": {},
  "$name": "userform",
  "$dirty": false,
  "$pristine": true,
  "$valid": true,
  "$invalid": false,
  "$submitted": false,
  "email": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "email",
    "$options": null
  }
}

$validators校验器

自定义校验器，在$validators上定义属性，就是我们自定义的校验器，参数一个是模型值，一个是视图值（两个值可以不一样可以一样，后面的会写到如何使他们不同）

这边require了ngModel模块是因为取的是ng-model上的值（text框绑定的密码的值），这个ngModel是这个文本框对象的（就是上面userform的email的对象）

return的是布尔值，校验不通过会出现在对象的$error里

1
2
3
4
5
6
7
8
link:function (scope, element, attrs,ngModel) {
                //$validators里定义的每个属性代表一个验证器
                //modelValue是scope上的属性值(模型值) viewValue是视图值(视图值)
                ngModel.$validators.validSame = function (modelValue, viewValue) {
                    var val = modelValue || viewValue;
                    return val == scope.$eval(attrs['checkPassword']);
                }
}

$parsers和$formatters

这边的例子修改了input框的值（金额：$123），在视图的时候加上前缀，在模型值上去掉前缀

$parsers和$formatters都是一个数组（管道），视图到模型和模型到视图的值的转换中，通过数组中所有的方法

  • $parsers：$setViewValue(value)被赋值给$modelValue之前，value值会先经过$parsers管道里的所有函数，每次的返回值传递到下一个函数
  • $formatters：当模型变化时被调用，模型值会倒着调用数组中的函数，然后把返回值传给下一个函数，最后返回值会传递给dom元素，用来更新视图中的格式化模型值
1
2
3
4
5
6
7
8
9
10
link:function (scope, element, attrs, ngModel) {
                //视图到模型
                ngModel.$parsers.push(function (viewValue) {
                    return viewValue.slice(1)
                });
                //模型到视图
                ngModel.$formatters.push(function (modelValue) {
                    return '$'+(modelValue || '')
                })
}

$setValidity

设置校验器的值

这边在向服务端验证用户名是否重复的例子里面用到，前台发ajax请求，验证用户名，返回same:true(false)，如果是重复了的话，就相当于在这个form对象里面加了这个same验证器，然后验证不通过，所以在$error中就有这个same了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
link:function (scope, element, attrs,ngModel) {
                //监控模型值的变化
                scope.$watch(attrs['ngModel'],function (newVal) {
                    $http({
                        method:'POST',
                        headers:{'Content-Type':'application/json'},
                        url:'http://localhost:8004/user/check',
                        data:{'username':newVal}
                    }).success(function (data,status,headers,conf) {
                        //返回一个promise
                        //4个参数 响应体 响应状态码 响应头 配置对象
                        //通过返回值设置ngModel的合法性
                        ngModel.$setValidity('same',data.same);
                    })
                })
}