angularjs - ng-minlength 中的动态值

Question

我有一个名为的常量Config，其中包含一个task.minlength = 3属性。

我将常量附加到$rootScope：

.run(function($rootScope, Config) {
  $rootScope.Config = Config;
})

在模板中，我想将Config.task.minlength值设置为输入ng-minlength指令：

<input type="text" ng-model="newTask" placeholder="Write a new task..." required ng-minlength="{{ Config.task.minlength }}">

根据 DevTools 正确解析：

但是，验证不会被触发：

$scope.form.$error['minlength'] // undefined

当我只写3而不是插值时它工作正常Config.task.minlength。

的值是否ng-minlength必须硬编码？有什么解决方法吗？

Answer 1

ngModelController不要以任何方式$observe或$eval的值ngMinlength，因此它只获取静态整数值。

我创建了自己的使用指令$observe，这是一个示例：

app.directive('myMinlength',function(){
  return {
    require: 'ngModel',
    link: function(scope,elm,attr,ngModel){

      var minlength = 0;

      var minLengthValidator = function(value){     
        var validity = ngModel.$isEmpty(value) || value.length >= minlength;
        ngModel.$setValidity('minlength',  validity);
        return validity ? value : undefined;
      };

      attr.$observe('myMinlength', function(val){
         minlength = parseInt(val,10);
         minLengthValidator(ngModel.$viewValue);
      });


      ngModel.$parsers.push(minLengthValidator);
      ngModel.$formatters.push(minLengthValidator);
    } 
  };
});

像这样使用它：

<input type="text" name="something" my-minlength="{{config.min}}" ng-model="something">

Answer 2

哦，有一些语法错误。

您应该为输入设置名称：

<input name="newtask" type="text" ng-model="newTask" placeholder="Write a new task..." required ng-minlength="{{ Config.task.minlength }}">

然后，您将捕获如下错误：

$scope.form.newtask.$error['minlength']

Answer 3

实现动态值并不难ng-minlength。Angular 将监视 $scope 值并相应地更新。

查看 Plunker：http ://plnkr.co/edit/tMHQq7YIBlvMw7A60H2e?p=preview

控制器

function myCtrl (){
   $scope.myMinLength = 5; // could also come from config
}

看法：

<input type="text" ng-model="myString" ng-minlength="myMinLength">

需要注意的重要一点是， 的值ng-minlength不必放在大括号中。