$parsers & $formatters

一、理解 $parsers 和 $formatters

Angular 是MVVM框架，model层数据变化了会通知view层更新，同样的view层更新了也会通知到model

$parsers 和 $formatters 就是储存于ngModel中的管道函数的数组集合

由model到view的变化会依次触发 $formatters 中的函数

反之，由view到model的变化会依次触发 $parsers 中的函数

二、代码

 <div ng-controller="myController">
     <form name="myForm" novalidate>
         <input
             type="text"
             name="amount"
             ng-model="test"
             required
             nan-form-max="200"
             ng-click="showErr()"
         >
             <p ng-show="myForm.amount.$error.required">不能为空</p>
             <p ng-show="myForm.amount.$error.nanFormMax">不能大于200</p>
     </form>
 </div>

 angular
     .module("myApp", [])
     .directive('nanFormMax', nanFormMax)
     .controller('myController', function ($scope, $timeout) {
         // $scope.test = "1231";
         $timeout(() => {
             $scope.test = 123;
         }, 2000)
         $scope.showErr = function () {
             // console.log($scope.myForm);
         }
     })

     function nanFormMax() {
         return {
             restrict: 'A', // E element / A attribute / C class / M comment
             require: '?ngModel', // NgModelController是用来为ng-model提供了一组API
             link: function (scope, element, attrs, ctrl) {
                 if (!ctrl) {
                     return;
                 }
                 let max = 0;
                 // $observe是Attrbutes(attrs)对象的一个方法
                 // 它只能被用于观察DOM的attribute属性的值的改变
                 // 只能被指令内部使用或调用。
                 attrs.$observe('nanFormMax', function (value) {
                     let floatVal = parseFloat(value, 10);
                     max = isNaN(floatVal) ? 0 : floatVal;
                 });
                 // $parsers 是从view到model的变化
                 ctrl.$parsers.push(function (viewVal) {
                     console.log('$parsers方法被调用');
                     return checkVal(viewVal);
                 });
                 // $formatters 是从 model 到 view 的变化
                 ctrl.$formatters.push(function(viewVal){
                     console.log('$formatters方法被调用');
                     return checkVal(viewVal);
                 });

                 function checkVal (viewVal) {
                     if (viewVal > max) {
                         ctrl.$setValidity('nanFormMax', false);
                     } else {
                         ctrl.$setValidity('nanFormMax', true);
                     }
                     return viewVal;
                 }
             }
         }
     }

三、$scope.myForm & $scope.myForm.amount