Angularjs 无效时未填充指令中的ng minlength

我正在创建一个封装标签的输入指令，以及一些错误消息，但是我被ng minlength和ng maxlength卡住了。问题是，在模型值成为有效值之前，它们不会填充该值，因此我的父范围可以显示一个值，而我的指令不能，反之亦然。看看这个例子，我的意思

只有这样才能定义我自己的minlength和maxlength验证器吗？是否有办法配置此行为，以便始终填充模型？我想在我的指令中使用所有内置的验证器，所以毫无疑问，这将是所有验证器的问题，我不想重新定义它们

HTML:

外部范围1


指令范围1






外部范围2


指令范围2

Javascript:

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

app.controller('Controller', function($scope){
  $scope.model1 = "Model1";
  $scope.model2 = "Model2";
});

app.directive('inputDir', function(){
  return {
    restrict: 'E',
    template: '<input type="text" ng-model="model" ng-minlength="{{ minlength }}" />',
    scope: {
      model: '=ngModel',
      minlength: '=ngMinlength'
    }
  };
});

var-app=angular.module（'app'，[]）；
应用程序控制器（'controller'，函数（$scope）{
$scope.model1=“model1”；
$scope.model2=“model2”；
});
应用程序指令（'inputDir'，函数（）{
返回{
限制：'E'，
模板：“”，
范围：{
型号：'=ngModel'，
minlength:'=ngMinlength'
}
};
});

对于其他有相同问题的人，我通过重新定义所有验证器解决了这个问题，但现在它们在无效时返回值，因此填充模型。仅包括valuedValidators模块。这些验证器在$error对象上可用，如vvminlength等

vv validators.js

(function () {
    'use strict';

    var validators = {};
    validators.vvUrl = function(value){
        var urlRegex = new RegExp(/[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi);
        return urlRegex.test(value);
    }

    validators.vvEmail = function(value){
        var emailRegex = new RegExp(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
        return emailRegex.test(value);
    }

    validators.vvMinlength = function(value, min){
        var huh = value.length >= parseInt(min);
        return min && value && huh;
    }

    validators.vvMaxlength = function(value, max){
        return max && value && value.length <= parseInt(max);
    }

    validators.vvMin = function (value, min) {
        return min && parseFloat(value) >= parseFloat(min);
    }

    validators.vvMax = function (value, max) {
        return max && parseFloat(value) <= parseFloat(max);
    }

    validators.vvPattern = function (value, pattern) {
        return pattern && new RegExp(pattern).test(value);
    }

    validators.vvFloat = function (value) {
        var floatRegex = new RegExp(/^\-?\d+((\.|\,)\d+)?$/);
        return floatRegex.test(value);
    }

    validators.vvInteger = function (value) {
        var integerRegex = new RegExp(/^\-?\d+$/);
        return integerRegex.test(value);
    }

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

    var names = Object.keys(validators);
    names.forEach(function(name){
        app.directive(name, function(){
            return {
                restrict: 'A',
                require: 'ngModel',
                link: function (scope, element, attrs, controller) {
                    controller.$parsers.unshift(function (viewValue) {
                        var valid = true;
                        var attrValue = attrs[name];
                        var func = validators[name];
                        if (attrValue !== 'false') {
                            valid = func(viewValue, attrValue);
                            controller.$setValidity(name.toLowerCase(), valid);
                        }
                        return viewValue;
                    });
                }
            };
        });
    });
}());

（函数（）{
"严格使用",；
var验证器={}；
validators.vvUrl=函数（值）{
var urlRegex=newregexp（/[-a-zA-Z0-9@:%\+.~\？&/=]{2256}\.[a-z]{2,4}\b（\/[-a-zA-Z0-9@:%\+.~\\？&/=]*）/gi）；
返回urlRegex.test（值）；
}
validators.vvEmail=函数（值）{
var emailRegex=newregexp（/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*）（\“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}]）；（[a-zA 0-9]+-Z]+-[a-2]）/；
返回emailRegex.test（值）；
}
validators.vvMinlength=函数（值，最小值）{
var huh=value.length>=parseInt（最小值）；
返回最小值（&&value&&huh）；
}
validators.vvMaxlength=函数（值，最大值）{
返回max&&value&&value.length=parseFloat（最小值）；
}
validators.vvMax=函数（值，最大值）{
returnmax&&parseFloat（value）还有一个更简单的解决方案：使用两个文本区域

第一个是草案，第二个是进行验证的模型

<textarea name="message_body_draft" cols="47" rows="15" style="width: 100%;"
    ng-model="message_body_draft"
    ng-change="message_body=message_body_draft"></textarea>

<textarea name="message_body" style="width: 100%;" disabled ng-model="message_body"
    ng-minlength="100" required></textarea>



当用户写入第一个模型时，它将自动填充正确的模型（第二个）.
我猜viewvalue只有在模型处于有效状态时才会传递给模型。是的，除了实现我自己的验证器之外，还有人对此有其他建议吗？谢谢，Simon。你能在你的指令中发布一个例子说明你现在是如何使用它的吗？我也在尝试封装标签、输入字段和验证指令中的消息，并且由于Angle强调在模板级别而不是在控制器或模型级别进行验证，我很难弄清楚如何将特定字段的验证标准传递到指令中，以便它“通过”对于输入字段本身…嘿，Alex，您需要在指令范围中将ngModel指定为“=”，以便内部输入双向绑定到外部范围上的值。您还必须确保您的模型是对象的属性，否则一旦修改它们，您将丢失对它们在内部范围内的引用。如果您将控制器用作syntax，默认情况下您会出现这种行为。我已将我的指令定义、模板和用法添加到此Plunk中。它不起作用，因为它依赖于我未发布的其他代码，但希望它能有所帮助。Simon，感谢Plunk。它确实有助于可视化您的方法。理想情况下，我可以在模型或控制器上指定验证属性，并绑定到每个表单字段的错误属性。问题是，我需要为每个字段上的每个验证提供自定义消息，并且可能无法像您在指令中提供的那样具有通用性。我对Angular比较新，但有很多Ember经验。我使用此与Ember的混合来完成此任务，它在swimm中工作Inly：嘿，Alex，如果你看一下我这里的指令定义，你会发现你可以为每个验证器指定自定义msg。例如vv minlength msg=“Custom”。compile（）中的设置函数只是为了定义一些默认的消息，以防没有提供。这就是你的意思吗？如果你在一个Plunk中发布一些代码，我可以看看。也许在一个新的问题？
<textarea name="message_body_draft" cols="47" rows="15" style="width: 100%;"
    ng-model="message_body_draft"
    ng-change="message_body=message_body_draft"></textarea>

<textarea name="message_body" style="width: 100%;" disabled ng-model="message_body"
    ng-minlength="100" required></textarea>