Угловая директива js не работает при загрузке страницы

Question

Я новичок в angularjs, указанная ниже директива - это поддержка десятичной и запятой, она отлично работает, когда в поле внесены изменения, когда данные в полях не проверяются, когда страница загружается

 var app = angular.module('myApply.directives', [], function() { 
}); 
app.directive('numericDecimalInput', function($filter, $browser, $locale,$rootScope) { 
     return { 
       require: 'ngModel', 
       priority: 1, 
       link: function($scope, $element, $attrs, ngModelCtrl) { 
        var replaceRegex = new RegExp($locale.NUMBER_FORMATS.GROUP_SEP, 'g'); 
        var fraction = $attrs.fraction || 0; 


        var listener = function() { 
         var value = $element.val().replace(replaceRegex, ''); 
         $element.val($filter('number')(value, fraction)); 
        }; 


        var validator=function(viewValue) { 

         ngModelCtrl.$setValidity('outOfMax', true); 
         ngModelCtrl.$setValidity(ngModelCtrl.$name+'Numeric', true); 
         ngModelCtrl.$setValidity('rangeValid', true); 
         if(!_.isUndefined(viewValue)) 
         { 
          var newVal = viewValue.replace(replaceRegex, ''); 
          var newValAsNumber = newVal * 1; 
          // check if new value is numeric, and set control validity 
          if (isNaN(newValAsNumber)) { 
           ngModelCtrl.$setValidity(ngModelCtrl.$name + 'Numeric', false); 
          } else 
          { 
            if (newVal < 0) { 
             ngModelCtrl.$setValidity(ngModelCtrl.$name + 'Numeric', false); 
            } 
            else { 
             newVal = newValAsNumber.toFixed(fraction); 
             ngModelCtrl.$setValidity(ngModelCtrl.$name + 'Numeric', true); 
             if (!(_.isNull($attrs.maxamt) || _.isUndefined($attrs.maxamt))) { 
              var maxAmtValue = Number($attrs.maxamt) || Number($scope.$eval($attrs.maxamt)); 
              if (newVal > maxAmtValue) { 
               ngModelCtrl.$setValidity('outOfMax', false); 
              } else { 
               ngModelCtrl.$setValidity('outOfMax', true); 
              } 

              if(!(_.isNull($attrs.minamt) || _.isUndefined($attrs.minamt))) 
              { 
               var minAmtValue = Number($attrs.minamt)|| Number($scope.$eval($attrs.minamt)); 
               if((newVal > maxAmtValue) || (newVal < minAmtValue)){ 
                ngModelCtrl.$setValidity('rangeValid', false); 
              } 
              else 
              { 
              ngModelCtrl.$setValidity('rangeValid', true); 
              } 


              } 

             } 
             else if((!(_.isNull($attrs.minamt) || _.isUndefined($attrs.minamt)))) 
             { 
              var minAmtValue = Number($attrs.minamt)|| Number($scope.$eval($attrs.minamt)); 
              if(newVal < minAmtValue) 
               { 
                ngModelCtrl.$setValidity('outOfMin', false); 
               } 
              else 
               { 
                ngModelCtrl.$setValidity('outOfMin', true); 
               } 

             } 
             else { 
              ngModelCtrl.$setValidity('outOfMax', true); 


             } 
            } 
          } 

          return newVal; 

         } 

        }; 


        // This runs when the model gets updated on the scope directly and keeps our view in sync 
        ngModelCtrl.$render = function() { 
         ngModelCtrl.$setValidity('outOfMax', true); 
         ngModelCtrl.$setValidity(ngModelCtrl.$name+'Numeric', true); 
         $element.val($filter('number')(ngModelCtrl.$viewValue, fraction)); 

        }; 

        $element.bind('change', listener); 
        $element.bind('keydown', function(event) { 
         var key = event.keyCode; 
         // If the keys include the CTRL, SHIFT, ALT, or META keys, home, end, or the arrow keys, do nothing. 
         // This lets us support copy and paste too 
         if (key == 91 || (15 < key && key < 19) || (35 <= key && key <= 40)) 
          return; 
        }); 

        $element.bind('paste cut', function() { 
         $browser.defer(listener); 
        }); 

        ngModelCtrl.$parsers.push(validator); 
        ngModelCtrl.$formatters.push(validator); 

       } 

      }; 
    }); 

Может кто-нибудь, пожалуйста, дайте мне знать, что мне не хватает. Благодарим вас заранее.

Answer 1

Вы объявили свой app (не показывает это в вашем коде)? то есть:

var app = angular.module('app', []); 

У вас есть ng-app в вашем HTML-документа в любом месте?

<html lang="en-GB" ng-app="app"> 

Заканчивать документацию для начала работы с модулями (Угловой очень хорошо документирован, хорошо стоит читать.): https://docs.angularjs.org/guide/module

Answer 2

app.directive('numericDecimalInput', function($filter, $browser, $locale,$rootScope) { 
    return { 
      require: 'ngModel', 
      priority: 1, 
      link: function($scope, $element, $attrs, ngModelCtrl) { 
       ... 
       validator($element.val()); 

      } 

     }; 
});