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', []);

您的HTML文档中是否有ng-app？

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

查看文档以开始学习模块（Angular有很好的文档记录，非常值得一读）：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());

            }

        };
});

Angular js指令不适用于页面加载

2 个答案: