$parsers & $formatters

<!–

(adsbygoogle=window.adsbygoogle||[]).push({})

–>

(adsbygoogle=window.adsbygoogle||[]).push({})

<!–
–>

一、理解 $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;

                 }

             }

         }

     }