角の付いたディレクティブ：数字だけを許可する

Question

ここにはa sample angular directive to prevent typing non-numeric keys (StackOverflow answer)です。 私はthis fiddleのようなものをいくつかの入力でis-numberディレクティブを使うよう書いています。私の入力にはさまざまなディレクティブがあるので、上の答えのアップデートで提案されているものと同じテンプレートを使用することはできません。

var $scope; 
var app = angular.module('myapp', []); 

app.controller('Ctrl', function($scope) { 
    $scope.myNnumber1 = 1; 
    $scope.myNnumber2 = 1; 
}); 

app.directive('isNumber', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, element) { 
      scope.$watch(element.ngModel, function(newValue,oldValue) { 
       newValue = String(newValue); 
       newValue = newValue.replace('۰', '0').replace('۱', '1').replace('۲', '2').replace('۳', '3').replace('۴', '4').replace('۵', '5').replace('۶', '6').replace('۷', '7').replace('۸', '8').replace('۹', '9'); 
       var arr = String(newValue).split(""); 
       if (arr.length === 0) return; 
       if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.')) return; 
       if (arr.length === 2 && newValue === '-.') return; 
       if (isNaN(newValue)) { 
        element.ngModel = oldValue; 
       } 
      }); 
     } 
    }; 

更新： 私は上の非英語番号とを変換するために、いくつかのプロセスを実行する必要があることをご検討ください。 Angular_10の答えに基づいてa new fiddle hereを作成しました。さて、すべてのことは、カーソルの位置を除いて、ペルシャ数字をタイプする間は問題ありません。私がペルシア語の数字を入力すると、それは英語の同等の数字に置き換えられますが、カーソルは突然最後に飛びます。

Answer 1

OK！あなたの要件を見て私は自由をとり、さらにカスタマイズされた指令を書いた。ここで

はあなたが言及し、与えられた指令への変更が問題を引き起こして作られたのと同じ

問題

例えばfiddleです。

1. あなたの$スコープの変数名は、HTML/JSで間違っている（; $ scope.myNnumber2 = 1; $ scope.myNnumber1 = 1、それはしてJSにし、HTMLでNG-モデル= "myNumber1"）
2. element ng-modelにアクセスしていて、悪い習慣であるディレクティブを修正しようとしています。また、ディレクティブが機能しないという根本的な原因も修正しようとしています。ng-modelの値は変更しませんが、角度は認識できません。
3. $watchを使用する以上のことは、パフォーマンス上の理由から必ずしも望ましいとは限りません。

app.directive('isNumber', function() { 
    return { 
     require: 'ngModel', 
     restrict: 'A', 
     link: function(scope, element, attr, ctrl) { 
      function inputValue(val) { 
       if (val) { 
        var numeric = val.replace(/[^- 0-9]/g, ''); 

        if (numeric !== val) { 
         ctrl.$setViewValue(numeric); 
         ctrl.$render(); 
        } 
        return numeric; 
       } 
       return undefined; 
      } 
      ctrl.$parsers.push(inputValue); 
     } 
    }; 

}); 

ソリューションコントローラの通信が指令から必要とされている場合、我々はCtrlキーのparamは、我々はコントローラの範囲から/ビュー物事を変更することができるというリンクfunction.Fromに4のparamとしてコントローラを渡すことができます。

いくつかの基本正規表現を使用して、入力された入力を調べ、コントローラスコープのオブジェクトビュー値に設定します。

ctrl.$setViewValue(numeric); //to set the value in the respective ngModdel 
ctrl.$render(); //to display the changed value 

$setViewValue