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正确解析：

enter image description here

但是，验证不会被触发：

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

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://jsfiddle.net/4u0pq1a5/

<强>控制器

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

查看：

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

需要注意的重要一点是，ng-minlength的值不一定是大括号。

以ng-minlength为单位的动态值

3 个答案: