à propos des directives angularJS

Question

J'écris une directive appelée 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"> 

le reg a été utilisé pour faire correspondre chinois. J'ai trouvé que si l'espace d'entrée au début de la boîte d'entrée ou à la fin de celui-ci. ngModel. $ Parsers.push ne s'est pas déclenché avant d'avoir tapé un caractère. En outre, lorsque ngModel. $ Parsers.push est déclenché, viewValue ne contient pas l'espace qui se trouve à la fin de cette zone de saisie ou à la fin de celui-ci. Quelqu'un peut-il m'aider, thx.

Answer 1

Ajoutez ng-trim="false" à l'élément d'entrée qui a utilisé votre directive.

---

La raison est que: jeux angulaires ng-trim true par défaut qui trims espace blanc dans des boîtes d'entrée et mène aucun changement ngModel.

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; 
 
     }); 
 
    } 
 
    } 
 
})

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