모든 값 업데이트 대신 $ parsers 및 $ formters가 한 번만 호출됩니다.

Question

입력란에 텍스트 앞에 $을 추가하는 currency이라는 지정 문을 만들려고합니다. 달러 기호는 항상 표시되어야하며 제거 할 수 없어야합니다.

app.directive('currency', function() { 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function (scope, elem, attrs, controller) { 

     // view -> model 
     controller.$parsers.push(function (viewValue) { 
     viewValue = viewValue.replace(/^\$/, ''); 
     controller.$viewValue = viewValue; 
     return viewValue; 
     }); 

     // model -> view 
     controller.$formatters.push(function (modelValue) { 
     modelValue = '$' + modelValue; 
     controller.$modelValue = modelValue; 
     return modelValue; 
     }); 
    } 
    }; 
}); 

근무 예 :

여기 내 코드입니다 당신이 볼 수 있듯이, 달러 기호가 처음에 추가됩니다 https://jsfiddle.net/U3pVM/29012/

, 삭제 할 수 있으며, 그 이후 추가되지 않습니다. $formatters에 푸시하는 기능은 한 번만 호출되는 것 같습니다. 그런 식으로 일할 것인가, 아니면 내가 놓친 것이 있습니까? 원하는 동작을 어떻게 구현할 수 있습니까?

Answer 1

그래, 내가 해결 방법을 시도했지만 작동하지만 올바른 방법이 있는지 확실하지 않습니다.

업데이트 바이올린 : https://jsfiddle.net/U3pVM/29014/

controller.$parsers.push(function (viewValue) { 
     //console.log(viewValue.substring(0,1)); 

     if(viewValue.substring(0,1) != "$"){ 
      var view_value = "$" + viewValue; 
      controller.$setViewValue(view_value); 
      controller.$render(); 
     } 
     viewValue = viewValue.replace(/^\$/, ''); 
     //controller.$viewValue = viewValue; 


     console.log(viewValue); 
     return viewValue; 
     }); 

P.S : 당신이 당신의 link 기능에 controller로 ngModel를 주입하는 이유는 확실하지 않다. 실수 일 수 있습니다.

Answer 2

필자는 $ 파서와 $ 포맷터가하는 일을 잘 이해하지 못한다고 생각합니다. 입력 필드에 무엇인가를 입력 할 때마다 $ 파서는이 값을 모델 값으로 변환해야합니다. 형식 작성자는 모델 값을 입력 필드의 표시 값으로 변환해야합니다.

누군가가 필드 ($ 파서 기능)에 무엇인가를 입력하면 입력 필드 ($ formatter 기능)의 내용을 변경하려고합니다.

이 방법으로 작동하도록하는 방법이 있지만 필자는 $ parsers 및 $ formatters의 개념을 오용하고 있습니다. 대신 사용자 지정 지시문을 보거나 (예 : 사용자 지정 지시문을 확장하여) 키 입력을 전달하는 등 입력하려는 작업을 입력에 추가해야합니다. 전체 바이올린

link: function (scope, elem, attrs, controller) { 

    elem.bind('keyup', function(evt) { 
    // Change the displayed value after every keypress 
    // This function is an example and needs serious work... 
    // Perhaps you should even put this in a separate directive 
    var value = elem.val().replace(/[^$0-9]/g, ''); 
    if (value && value.substring(0,1) !== '$') { 
     value = '$' + value; 
    } 
    elem.val(value); 
    }); 

    // view -> model 
    controller.$parsers.push(function (viewValue) { 
    // Any time the view changes, remove the $ sign and interpret the rest as number for the model 
    var modelValue = viewValue.replace(/^\$/, ''); 
    return parseFloat(modelValue); 
    }); 

    // model -> view 
    controller.$formatters.push(function (modelValue) { 
    // Any time the model (number) changes, append it with a $ sign for the view 
    var viewValue = '$' + modelValue; 
    return viewValue; 
    }); 
} 

또는 확인 : https://jsfiddle.net/cL0hpvp4/