<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;

                 }

             }

         }

     }