directive指令二 require:'^ngModel'

本章主要是讲指令与ngModel的交互。

在angular有一个内置指令叫ngModel，它是angular用来处理表单的最重要的指令。在源码中，页面上的model值的格式化、解析、验证都是由ngModel指令所对应的控制器ngModelController来实现的。ngModelController提供了很多方法和属性，我们可以通过自定义指令的require:'ngModel'来获取内置指令ngModel的ngModelController，进而在link函数里对操作ngModelController的方法和属性。

接下来具体讲一下ngModelController的方法和属性，以及它们的具体用法。

是一个json对象

{
   validateName: function(modelValue,viewValue){
       return ...
   }
}

当$setViewValue(value)被赋值给$modelValue之前，会经过$parsers管道，经过$parsers管道时，就会经过这个$validators管道。其中，validateName是验证器的名称，其中的参数modelValue和viewValue就是

<div class="alert alert-danger" role="alert" ng-show="myForm.myWidget.$error.validCharacters">
    <strong>Oh!</strong> 不符合自定义的验证规则!
</div>

ngModel.$validators.validCharacters = function(modelValue, viewValue) {
    var value = modelValue || viewValue;
    return /[0-9]+/.test(value);
};

$asyncValidators:也是一个json对象，不过可以用来处理异步验证。

<input validate-name type="text" name="myWidget" ng-model="userContent" ng-model-options="{updateOn:'blur'}" class="form-control" required uniqueUsername>

<div class="alert alert-danger" role="alert" ng-show="myForm.myWidget.$error.uniqueUsername">
      <strong>Oh!</strong> 已经存在的用户名!
</div>

app.directive('validateName',function($http,$q){
    return {
        restrict:'A',
        require:'?^ngModel',
        link:function(scope,iele,iattr,ctrl){
            ctrl.$asyncValidators.uniqueUsername = function(modelValue, viewValue) {
                var value = modelValue || viewValue;
                // 异步验证用户名是否已经存在
                return $http.get('/api/users/' + value).
                then(function resolved(res) {
                    if(res.data){
                        //用户名已经存在,验证失败,给下一个promise传递失败通知.
                        return $q.reject('res.data');
                    }
                    else {
                        //用户名不存在,验证成功.
                        return true
                    }

                }, function rejected() {
                        //请求失败
                })
            };
        }
    }
});

$render():在视图需要被更新的时候调用。由于ngModel的对比机制，$render()只在$modelValue和$viewValue都发生了实际的改变, 才会会被调用。也就是说，$render函数负责将模型值同步到视图上。

还有一些常用属性

属性	说明
$error	json对象。就是所有验证失败的验证名和失败信息组成的json对象。
$pending	json对象。正在进行中的异步验证会被放在这个对象里。
$untouched	布尔值。如果元素还没有失去过焦点,那这个值就是true。
$touched	布尔值。如果元素已经失去过焦点,那这个值就是false。
$pristine	布尔值。如果元素还没有和用户发生过交互,那这个值就是true。
$dirty	布尔值。如果元素已经和用户发生过交互,那这个值就是true。
$valid	布尔值。这个也很常用,就是当所有验证(异步同步),都通过的时候,它就是true。
$invalid	布尔值。这个也很常用,就是当所有验证(异步同步),其中有一个或一个以上验证失败,它就是true。
$name	字符串。很简单,就是获取元素的name属性。
$isEmpty	当我们需要判断input的value值是否为空的时候,可以使用这个方法。