Question

我写了一个名为ValidateChineseDirective的指令。

define(function(){
    'use strict';
    return function(module){
        module.directive('validateChinese',function(){
            return {
                restrict:'A',
                require:'ngModel',
                link:function(scope,ele,attr,ngModel){
                      if (!ngModel) return;
                      var maxlength = -1;
                      attr.$observe('validateChinese', function(value) {
                        var intVal = parseInt(value,10);
                        maxlength = isNaN(intVal) ? -1 : intVal;
                        ngModel.$validate();
                      });
                        ngModel.$parsers.push(function(viewValue){
                            var valueArray = viewValue.split("");
                            var reg = /[\u4E00-\u9FA5\uF900-\uFA2D]/;
                            var len=0;
                            for(var i=0;i<valueArray.length;i++){
                                len += reg.test(valueArray[i])?4:1;
                            }
                            if(len<=maxlength){
                                ngModel.$setValidity('validateChinese',true);
                            }else{
                                ngModel.$setValidity('validateChinese',false);
                            }
                            return viewValue;
                        });
                }
            }
        })
    }
})

HTML：

<input type="text" name="approvedDocNo" validate_chinese="4" ng-model="fundMaintenanceVM.editData.approvedDocNo" class="form-control">

reg用于匹配中文。我发现无论是输入框的开头还是输入框的末尾都有输入空格。 ngModel。$ parsers.push直到键入一个字符才触发。此外，当触发ngModel。$ parsers.push时，viewValue不包含位于此输入框末尾或末尾的空格。有人可以帮助我，thx。

Answer 1

将ng-trim="false"添加到使用您的指令的输入元素。

原因是：Angular将ng-trim设置为true 默认，它会修剪输入框中的空白区域，并且ngModel不会导致更改。

＆＃13;

angular.module("app", []).directive('validateChinese', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, ele, attr, ngModel) {
      if (!ngModel) return;
      var maxlength = -1;
      attr.$observe('validateChinese', function(value) {
        var intVal = parseInt(value, 10);
        maxlength = isNaN(intVal) ? -1 : intVal;
        ngModel.$validate();
      });
      ngModel.$parsers.push(function(viewValue) {
        var valueArray = viewValue.split("");
        var reg = /[\u4E00-\u9FA5\uF900-\uFA2D]/;
        var len = 0;
        for (var i = 0; i < valueArray.length; i++) {
          len += reg.test(valueArray[i]) ? 4 : 1;
        }
        if (len <= maxlength) {
          ngModel.$setValidity('validateChinese', true);
        } else {
          ngModel.$setValidity('validateChinese', false);
        }
        console.log('ngModel.$parsers.push fired.');
        return viewValue;
      });
    }
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.4/angular.min.js"></script>
<div ng-app="app">
  <input type="text" name="approvedDocNo" validate_chinese="4" ng-model="approvedDocNo" ng-trim="false" class="form-control">
  {{approvedDocNo}}
</div>

＆＃13;

关于angularJS指令

1 个答案: