NgModelController: $setViewValue,$render,Formatter, Parser

NgModelController为ngModel directive提供了API。这个controller包含了关于data-binding,validation,css update, value formatting and parsing的相关service.该controller本意上设计不包含任何处理DOM渲染或者侦听DOM events的逻辑。这些DOM相关的逻辑应该由其他使用ngModelController做databinding的directive来完成。Angular为几乎所有的input elements提供这个DOM逻辑。

$render()

该函数在当view需要更新时调用，一般预期ng-modle的使用者需要实现这个方法：

$setViewValue(value, trigger)

该函数用于更新view的value,当需要变更view values时，需要调用该方法。典型地，这个函数由DOM的事件处理函数来调用。比如，一个input directive在当它的input变更时就会调用$setViewValue,再比如：select控件在当一个option被选择时也会调用这个函数更新view value。

注意，当$setViewValue被调用时，新的value将会被staged，通过$parsers,$validators管道检查后被commit到view中。

$parsers

这是ngModelController提供的一个函数指针数组，它将作为一个pipeline，当控件从DOM读取value（由$viewVlaue缓存）时，这个$parsers数组中的所有函数将一个一个地执行。当顺序执行完毕后返回的value被传给$validators函数数组来做vaildation。如果parse发生错误，那么undefined将被返回。

$formatters

$formatters将包含一个作为pipeline的函数数组，在model value变更时被调用。这些函数将被反序调用，每个函数将其返回值传递给下一个函数。最后一个函数的输出作为实际的DOM value($viewValue)

该函数用于format/convert values for display in the control

function formatter(value) {

  if (value) {

    return value.toUpperCase();

  }

}

ngModel.$formatters.push(formatter);

$validators

这是一个当model value变更时将会被调用的validator集合。

ngModel.$validators.validCharacters = function(modelValue, viewValue) {

  var value = modelValue || viewValue;

  return /[0-9]+/.test(value) &&

         /[a-z]+/.test(value) &&

         /[A-Z]+/.test(value) &&

         /\W+/.test(value);

};

综合示例：

app.directive('changeCase', function(){

    return{

        restrict: 'A',

        templateUrl: 'scripts/directives/directive_templates/directive.html',

        require: 'ngModel',

        link: function(scope, element, attr, ngModel){

            ngModel.$formatters.push(function(value){

    value.toUpperCase();

    return value;

});

           ngModel.$parsers.push(function(value){

    value.toUpperCase();

    return value;

});

        }

    };

});

<form role="form" name="myform">

    <div class="form-group">

        <label>View Value:</label>

        <input name="someinput" changecase="" ng-model="some_letters.value">

    </div>

</form>

<strong>ModelValue:</strong>   <br>