ngModel. $ modelValue와 ngModel. $ viewValue의 차이점은 무엇입니까?

Question 1

다음 ckEditor 지시문이 있습니다. 하단에는 편집기에서 데이터를 설정하는 방법에 대한 예제에서 본 두 가지 변형이 있습니다.

app.directive('ckEditor', [function () {
    return {
        require: '?ngModel',
        link: function ($scope, elm, attr, ngModel) {

            var ck = null;
            var config = attr.editorSize;
            if (config == 'wide') {
                ck = CKEDITOR.replace(elm[0], { customConfig: 'config-wide.js' });
            } else {
                ck = CKEDITOR.replace(elm[0], { customConfig: 'config-narrow.js' });
            }


            function updateModel() {
                $scope.$apply(function () {
                    ngModel.$setViewValue(ck.getData());
                });
            }

            $scope.$on('modalObjectSet', function (e, modalData) {
                // force a call to render
                ngModel.$render();
            });

            ck.on('change', updateModel);
            ck.on('mode', updateModel);
            ck.on('key', updateModel);
            ck.on('dataReady', updateModel);

            ck.on('instanceReady', function () {
                ngModel.$render();
            });

            ck.on('insertElement', function () {
                setTimeout(function () {
                    $scope.$apply(function () {
                        ngModel.$setViewValue(ck.getData());
                    });
                }, 1000);
            });

            ngModel.$render = function (value) {
                ck.setData(ngModel.$modelValue);
            };

            ngModel.$render = function (value) {
                ck.setData(ngModel.$viewValue);
            };
        }
    };
}])

누군가가 다음의 차이점을 말해 줄 수 있습니까?

ck.setData(ngModel.$modelValue);
ck.setData(ngModel.$viewValue);

그리고 어느 것을 사용해야합니다. 각도 문서를 살펴보면 다음과 같이 표시됩니다.

$viewValue

Actual string value in the view.

$modelValue

The value in the model, that the control is bound to.

나는 저자가 문서에서 이것을 썼을 때 무엇을 의미했는지 전혀 모른다 :-(

Question 2

올바른 문서를보고 있지만 약간 혼란 스러울 수 있습니다. $modelValue및 $viewValue하나 개의 뚜렷한 차이가있다. 이것은 :

위에서 이미 언급했듯이 :

$viewValue:보기의 실제 문자열 (또는 개체) 값입니다.
$modelValue:컨트롤이 바인딩 된 모델의 값입니다.

ngModel이 <input />요소를 참조한다고 가정하겠습니다 ...? 따라서 사용자 <input>에게 표시되는 문자열 값이 있습니다. 그러나 실제 모델은 해당 문자열의 다른 버전 일 수 있습니다. 예를 들어 입력은 문자열을 표시 할 수 '200'있지만 <input type="number">(예를 들어) 실제로는 모델 값을 200정수로 포함합니다 . 따라서 "보기"에서 문자열 표현 <input>은 ngModel.$viewValue이고 숫자 표현은 ngModel.$modelValue.

또 다른 예 는가 있는 <input type="date">곳 과 해당 날짜 문자열을 나타내는 실제 자바 스크립트 객체입니다. 말이 돼?$viewValueJan 01, 2000$modelValueDate

귀하의 질문에 대한 답변이 되었기를 바랍니다.

Question 3

다음과 같은 것을 볼 수 있습니다.

$modelValue 즉, 컨트롤러에 노출되는 외부 API입니다.
$viewValue 내부 API이므로 내부적으로 만 사용해야합니다.

을 편집 할 때 $viewValue"렌더링 된 모델"이기 때문에 render 메서드가 호출되지 않습니다. 수동으로 수행해야하는 반면 렌더링 방법은 $modelValue수정 시 자동으로 호출됩니다 .

그러나, 정보, 덕분에 일관성을 유지합니다 $formatters및 $parsers:

당신이 변경하는 경우 $viewValue, $parsers그것은으로 다시 변환합니다 $modelValue.
당신이 변경하는 경우 $modelValue, $formatters로 변환됩니다 $viewValue.

Question 4

Angular는 ngModel 데이터의 두 가지 뷰를 추적해야합니다. DOM (브라우저)에서 볼 수있는 데이터가 있고 해당 값에 대한 Angular의 처리 된 표현이 있습니다. 이것은 $viewValueDOM 측 값입니다. 따라서, 예를 들어,에 <input>는 $viewValue사용자가 브라우저에 입력 한 내용입니다.

누군가 유형은 무엇인가되면 <input>그 다음은 $viewValue$ 파서에 의해 처리 및 호출되는 값의 각도의 관점으로 전환됩니다 $modelValue.

따라서 $modelValue앵귤러의 처리 된 값인 모델에서 볼 수있는 값인 반면 $viewValue원시 버전 이라고 생각할 수 있습니다 .

이것을 한 단계 더 나아 가기 위해 우리가 $modelValue. Angular는이 변경 사항을 확인하고 $ formatters를 호출 $viewValue하여 DOM으로 보낼 업데이트 된 (새 $ modelValue 기반) 을 만듭니다 .