Angularjs 使用指令进行初始表单验证

我有一个名为的验证指令valid-number用于使用 $setValidity 设置表单的有效性 - 这对于我在输入框中键入的任何文本值都适用，该输入框中已将指令作为属性应用。

HTML 是

<form name="numberForm">
<input name="amount" type="text" ng-model="amount" required  valid-number /></form>

该指令如下

angular.module('test',[]).directive('validNumber',function(){
            return{
                require: "ngModel",
                link: function(scope, elm, attrs, ctrl){

                    var regex=/\d/;
                    ctrl.$parsers.unshift(function(viewValue){
                        var floatValue = parseFloat(viewValue);

                        if(regex.test(viewValue)){
                            ctrl.$setValidity('validNumber',true);
                        }
                        else{
                            ctrl.$setValidity('validNumber',false);
                        }
                        return viewValue;
                    });
                }
            };
        });

但是，如果首次加载页面时输入框初始化的值无效，我还希望触发验证并将 css 设置为无效的 clsss，例如，如果我设置$scope.amount = 'not a number'我希望输入框已应用该指令，但没有高兴。为了not a number要突出显示为无效，我必须更改输入的内容，这会触发该指令。

我如何确保该指令适用于任何<input>初始化为？

完整的代码示例在这里；

http://jsfiddle.net/JW43C/5/ http://jsfiddle.net/JW43C/5/

$parsers数组包含将应用于模型从视图接收的值（用户输入的内容）的函数列表，以及$formatters数组包含在视图中显示之前应用于模型值的函数列表。

在您的指令中，您正确使用了$parsers数组，但您还需要添加$formatters如果您希望验证初始值，则为数组：

angular.module('test',[]).directive('validNumber',function(){
  return{
    require: "ngModel",
    link: function(scope, elm, attrs, ctrl){
      var regex = /^\d$/;
      var validator = function(value){
        ctrl.$setValidity('validNumber', regex.test(value));
        return value;
      };

      ctrl.$parsers.unshift(validator);
      ctrl.$formatters.unshift(validator);
    }
  };
});

演示插件 http://jsfiddle.net/Enjx8/