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

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

다음과 같은 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.

저자가 이 글을 썼을 때 무슨 뜻인지 모르겠다:-(

올바른 매뉴얼을 참조하고 있습니다만, 조금 혼란스러울 수 있습니다.그$modelValue그리고.$viewValue한 가지 뚜렷한 차이가 있다.바로 이것입니다.

위에서 설명한 바와 같이:

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

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

또 다른 예로는<input type="date">어디서$viewValue그런 것 같아Jan 01, 2000및 그$modelValue실제 javascript가 될 것입니다.Date해당 날짜 문자열을 나타내는 객체.이해 하셨나요?

그게 당신의 질문에 답하길 바랍니다.

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

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

편집 시$viewValue렌더링 메서드는 "모형 모델"이기 때문에 호출되지 않습니다.렌더링 메서드는 다음에 자동으로 호출되지만 수동으로 수행해야 합니다.$modelValue변경.

그러나 이 정보는 일관되게 유지됩니다.$formatters그리고.$parsers:

• 바꾸면$viewValue,$parsers그것을 로 번역할 것이다.$modelValue.
• 바꾸면$modelValue,$formatters로 변환합니다.$viewValue.

Angular는 ngModel 데이터의 두 가지 보기를 추적해야 합니다. 즉, DOM(브라우저)에서 볼 수 있는 데이터가 있고 Angular가 처리한 값이 있습니다.그$viewValue 사이드입니다.예를 예를 들면, 이렇게 요, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아.<input>$viewValue사용자가 브라우저에 입력한 내용입니다.

했을 때<input>$viewValue는 $의해 되며, $에 대한 됩니다.$modelValue

''를 돼요.$modelValue볼 수 있는 값, angular의 경우 angular의 경우 angular의 경우 angular의 경우 angular의 경우 angular의 경우 angular의 경우 angular의 경우 angular의 경우,$viewValueraw 버전입니다.

한 더 , 우리가 '아까부터' '아까부터' '아까부터' '아까부터' '아까부터' '아까부터' '아까부터' '아까부터' '아까부터' '아까부터' '아까부터' '아까부터' '아까부터' '아까부터'를 바꾸는 .$modelValue는 이 하고 $된 것을 .Angular는 $formatters를 호출합니다.$viewValue ($modelValue) DOM에 됩니다.

언급URL : https://stackoverflow.com/questions/19383812/whats-the-difference-between-ngmodel-modelvalue-and-ngmodel-viewvalue