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:컨트롤이 바인딩 된 모델의 값입니다.

I'm going to assume that your ngModel is referring to an <input /> element...? So your <input> has a string value that it displays to the user, right? But the actual model might be some other version of that string. For example, the input might be showing the string '200' but the <input type="number"> (for example) will actually contain a model value of 200 as an integer. So the string representation that you "view" in the <input> is the ngModel.$viewValue and the numeric representation will be the ngModel.$modelValue.

Another example would be a <input type="date"> where the $viewValue would be something like Jan 01, 2000 and the $modelValue would be an actual javascript Date object that represents that date string. Does that make sense?

I hope that answers your question.

---

You can see things like this :

• $modelValue is your external API, that is to say, something exposed to your controller.
• $viewValue is your internal API, you should use it only internally.

When editing $viewValue, the render method won't be called, because it is the "rendered model". You will have to do it manually, whereas the rendering method will be called automatically upon $modelValue modifications.

However, the information will remain consistent, thanks to $formatters and $parsers :

• If you change $viewValue, $parsers will translate it back to $modelValue.
• If you change $modelValue, $formatters will convert it to $viewValue.

---

Angular has to keep track of two views of ngModel data- there's the data as seen by the DOM(browser) and then there's Angular's processed representation of those values. The $viewValue is the DOM side value. So, for example, in an <input> the $viewValue is what the user typed in to their browser.

Once someone types something in <input> then $viewValue is processed by $parsers and turned into Angular's view of the value which is called $modelValue.

So you can think of $modelValue being angular's processed version of the value, the value you see in the model, while $viewValue is the raw version.

To take this one step further imagine we do something that changes the $modelValue. Angular sees this change and calls $formatters to create an updated $viewValue (based on the new $modelValue) to be sent to the DOM.

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