Angular.js: ngModelController $parsers 함수가 일관되게 호출되지 않음

$parsers 제 (사본)를 변환하기위한 것입니다 $viewValue 로 "저장"하기 전에 $modelValue (그리고 그 귀하의 예제가하고있는 것입니다). 실제로 $viewValue 변경하는 것은 아니므로(요소의 값을 업데이트하지만) 예기치 않은 동작으로 이어집니다.

이것은 예를 들어 더 잘 설명됩니다.

1. 사용자는 '1'을 입력합니다.
   
   
   
   • _ 전_ 파싱:
     
     
     
     
     
     • $modelValue : 정의되지 않음
     
     
     
     • $viewValue : 1
     
     
     
     • element.val() : 1
     
     
     
   
   
   • _After_ 구문 분석:
     
     
     
     
     
     • $modelValue : 1
     
     
     
     • $viewValue : 1
     
     
     
     • element.val() : 1
     
     
     
   
   
2. 사용자는 'x'를 입력합니다.
   
   
   
   • _파싱 전_:
     
     
     
     
     
     • $modelValue : 1
     
     
     
     • $viewValue : 1x
     
     
     
     • element.val() : 1x
     
     
     
   
   
   • _After_ 구문 분석:
     
     
     
     
     
     • $modelValue : 1
     
     
     
     • $viewValue : 1x(파서 fn에서 업데이트되지 않음)
     
     
     
     • element.val() : 1(파서 fn에서 업데이트됨)
     
     
     
   
   
3. 사용자가 'x'를 입력합니다.
   
   
   
   • _ 전_ 파싱:
     
     
     
     
     
     • $modelValue : 1
     
     
     
     • $viewValue : 1x (이전 $viewValue 도 1x 였으므로 감지된 변경 사항 없음)
     
     
     
     • element.val() : 1x
     
     
     
   
   
   • _No_ 구문 분석( $viewValue 에서 변경 사항이 감지되지 않았으므로) !!!
     
     
     
     
     
     • $modelValue : 1
     
     
     
     • $viewValue : 1x
     
     
     
     • element.val() : 1x
     
     
     
   
   
4. 사용자가 'x'를 입력합니다.
   
   
   
   • _파싱 전_:
     
     
     
     
     
     • $modelValue : 1
     
     
     
     • $viewValue : 1xx
     
     
     
     • element.val() : 1xx
     
     
     
   
   
   • _After_ 구문 분석:
     
     
     
     
     
     • $modelValue : 1
     
     
     
     • $viewValue : 1xx
     
     
     
     • element.val() : 1
     
     
     
   
   
5. _(...단계 (2)로 돌아가기...)_

이를 적절하게 처리하는 몇 가지 "각도" 방법이 있습니다. 예:

ngModel.$parsers.push(function (value) {
  var numbers = value.replace(/\D/g, '');
  if (numbers !== value) {
    ngModel.$setViewValue(numbers);   // Update the `$viewValue`
    ngModel.$render();                // Update the element's displayed value
  }
  return numbers;
});

업데이트된 펜

---

모든 것이 예상대로 작동하는 것 같아서 이 글을 닫습니다.
@visnup , 명확하지 않은 사항이 있으면 언제든지 질문에 대한 후속 조치를 취하십시오.

이 문제는 새 $viewValue가 커밋되지 않을 때마다 키 입력을 반복할 때 발생합니다. $parsers 컬렉션에서 제안된 $setViewValue 사용은 때때로 일부 포럼에서 $viewValue를 직접 설정하는 것을 선호하여 피하는 경우가 있습니다.

다음도 작동합니다.

ngModel.$viewValue = numbers;   // Update the '$viewValue'
ngModel.$commitViewValue(); //update $$lastCommittedViewValue
ngModel.$render();                // Update the element's displayed value

재귀 함정을 전혀 피하고 싶다면 캡슐화 위반에 신경 쓰지 않는다면 $$lastCommittedViewValue를 직접 업데이트할 수 있습니다. 불행히도 이러한 함수에서 무한 재귀가 발생할 때 최대 발생 후에도 콘솔에 보고되지 않는 경우를 보았습니다. 테스트 중에 중단점을 설정하고 재귀를 확인하는 데 몇 분 정도 시간을 할애할 가치가 있습니다.

@gkalpak 과 @snaptech 설명이 결합되어 황금 솔루션이 됩니다 :) :+1: