關於angularJS指令

我寫了一個名爲ValidateChineseDirective的指令。關於angularJS指令

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

用於匹配中國的章。我發現在輸入框的開始處還是在結尾處輸入空格。 ngModel。$ parsers.push直到輸入一個字符纔會觸發。此外，當ngModel。$ parsers.push被觸發時，viewValue不包含該輸入框末尾或末尾的空格。有人可以幫助我，thx。

來源

2017-04-06 Kelvin Huang

ü可以創建一個簡單的小提琴？ –

對不起，我不知道如何正確創建這個簡單的小提琴。 –

以下代碼是否適合您？ –

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

的原因是：角套ng-trim真默認，這在修剪輸入框空白，並導致與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>

來源

2017-04-06 10:26:21 Pengyy

真的很感謝。它的作品..... –

關於angularJS指令

回答

相關問題