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， 这是一个example :

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">