각도 지시문 : 숫자 만 허용

Question

여기에 a sample angular directive to prevent typing non-numeric keys (StackOverflow answer)입니다. 몇 가지 입력에서 is-number 지시어를 사용하려면 this fiddle과 같은 것을 쓰고 싶습니다. 입력에 다양한 지시어가 있으므로 위에서 언급 한 답변의 업데이트에서 제안 된 템플릿과 동일한 템플릿을 사용할 수 없다고 생각하십시오.

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에 겨 모델 = "myNumber1")
2. element ng-model에 액세스하고 나쁜 지시어 인 지시문을 통해 수정하려고 시도하고 지시문이 작동하지 않는 근본 원인도 수정하려고합니다. ng-model 값을 변경하지는 않지만 각도가 인식하지 못하는 HTML 요소 값을 수정하면됩니다.
3. $watch 지시어를 사용하는 것이 성능 향상을 위해 항상 바람직한 것은 아닙니다.

솔루션 컨트롤러 통신이 우리가 Ctrl 키의 PARAM 우리는 컨트롤러 범위/뷰 가지를 수정할 수있는 링크 function.From 4 PARAM으로 컨트롤러를 전달할 수 있습니다 지침에서 요구되는

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.$setViewValue(numeric); //to set the value in the respective ngModdel 
ctrl.$render(); //to display the changed value 

상세 정보 $setViewValue