角でカスタムテキストボックスを強化しようとしています

Question

私はカスタムテキストボックスディレクティブを使用しています。このディレクティブには入力要素があります。

私は経由して、それを強化するために、属性のディレクティブを作成しようとしている：

1）は、その時点で、私はおそらく警告するコールバック関数を呼び出します、ユーザーが文字の「n」の数を超える入力することができませんそれら。これは、ユーザーが文字をテキストボックスに貼り付けるときにも有効であることに注意してください。

私はhtmlがmaxlengthプロパティを提供していますが、入力ボックスにアクセスできないことを知っています。また、制限が満たされていない場合にコールバックを開始する必要があります。

これは私がリンク機能で、これまでに試したものです：

element.on('keypress', function(event) { 
    if (model.length > n) { 
     e.preventDefault(); 
     //call some passed in callback function here. 
    } 
}); 

element.on('paste', function(event) { 
    //do something similar here (but having trouble modifying the input from 
    //the paste event) I want to strip out characters if it goes over the limit 
}); 

これを行うには良い方法があるかどうかはわからない。多分ngModelOptions経由？

ngMaxLengthもありますが、それが役立つかどうかはわかりません。

Answer 1

カスタム
Plsのは、参照する入力データ・フィールドを検証するパーサとフォーマッタを使用することができます。 https://www.nadeau.tv/using-ngmodelcontroller-with-custom-directives/ を深く洞察するために。

angular.module('myApp',[]) 
 

 
.directive('mydiv', function() { 
 
return { 
 
restrict : 'E', 
 
template : '<input ng-model = "name" custom type = "text"/>' 
 
} 
 
}) 
 
.directive('custom' , function(){ 
 
return { 
 
\t \t restrict : 'A', 
 
    require : 'ngModel', 
 
    link : function(scope , ele , attrs, ngModel){ 
 
     
 
     ngModel.$parsers.push(function(view , model){ 
 
     if(view.length > 5){ 
 
      \t alert('Value should not be more than 5 characters.'); 
 
      var val = view.substr(0,5); 
 
      ngModel.$viewValue = val; 
 
      ngModel.$render(); 
 
      return val; 
 
      
 
     }else{ 
 
     \t return view; 
 
     } 
 
     
 
     }) 
 
    } 
 
} 
 

 

 
}); 
 
//myApp.factory('myService', function() {}); 
 

 
function MyCtrl($scope) { 
 
    $scope.name = 'Superhero'; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-controller="MyCtrl" ng-app = 'myApp'> 
 
    Hello, {{name}}! <br/><br/> 
 
    <mydiv></mydiv> 
 
</div>