2014-11-03 52 views
2

我想在Angular 1.3+中創建一對自定義字數驗證程序,以便我可以傳遞最小/最大值,例如類似如下:Angular 1.3+中的自定義最小/最大字數驗證程序?

<input type=text min-word-count="10" max-word-count="200"> 

我從official documentation on the subject收集類似下面的整數例如自定義指令應該是一個合適的契合:

app.directive('integer', function() { 
    return { 
    require: 'ngModel', 
    link: function(scope, elm, attrs, ctrl) { 
     ctrl.$validators.integer = function(modelValue, viewValue) { 
     if (ctrl.$isEmpty(modelValue)) { 
      // consider empty models to be valid 
      return true; 
     } 

     if (INTEGER_REGEXP.test(viewValue)) { 
      // it is valid 
      return true; 
     } 

     // it is invalid 
     return false; 
     }; 
    } 
    }; 
}); 

但是,我不知道如何自定義這個例子是爲了在運行中將自定義值傳遞給它。

將值傳遞給像上面那樣的自定義驗證指令的最佳做法是什麼?

+0

在本例中,這些值在'attrs'中可用。你可以使用'attrs.minWordCount'和'attrs.maxWordCount'來獲取你的參數。如果要傳遞計算值而不是靜態值,可以設置一個作用域並使用'='綁定到它們(有關詳細信息,請參閱角度範圍幫助)。 – Bill 2014-11-03 23:54:18

回答

1
app.directive('maxWordCount', function() { 
return { 
    require: 'ngModel', 
    link: function(scope, elm, attrs, ctrl) { 

     //For DOM -> model validation 
     var maxLimit = attrs.maxWordCount; 
     ctrl.$parsers.unshift(function(value){ 

      var valid = true; 

      if(value){ 
       valid = value.split(' ').length <= maxLimit; 
      } 

      ctrl.$setValidity('maxWordCount', valid); 
      return valid ? value : undefined; 
     }); 

     //For model -> DOM validation 
     ctrl.$formatters.unshift(function(value) { 

      var valid = true; 

      if(value){ 
       valid = value.split(' ').length <= maxLimit; 
      } 

      ctrl.$setValidity('maxWordCount',valid); 
      return value; 
     }); 

    } 
}; 
});