NgModel. $ ModelValue ve ngModel. $ ViewValue arasındaki fark nedir

Question 1

Aşağıdaki ckEditor yönergesine sahibim. En altta, düzenleyicide verilerin nasıl ayarlanacağına ilişkin örneklerden gördüğüm iki varyasyon var:

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);
            };
        }
    };
}])

Birisi bana aşağıdakiler arasındaki farkın ne olduğunu söyleyebilir mi:

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

Ve hangisini kullanmalıyım. Açısal belgelere baktım ve şöyle diyor:

$viewValue

Actual string value in the view.

$modelValue

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

Yazarın bunu belgeye yazarken ne demek istediğine dair hiçbir fikrim yok :-(

Question 2

Doğru belgelere bakıyorsunuz, ancak biraz kafanız karışmış olabilir. $modelValueVe $viewValuebir ayrı bir fark vardır. O bu:

Yukarıda belirttiğiniz gibi:

$viewValue:Görünümdeki gerçek dize (veya Nesne) değeri.
$modelValue:Modeldeki, denetimin bağlı olduğu değer.

NgModel'inizin bir <input />öğeye atıfta bulunduğunu varsayacağım ...? Yani, <input>kullanıcıya gösterdiği bir dize değeri var, değil mi? Ancak gerçek model, bu dizenin başka bir versiyonu olabilir. Örneğin, giriş dizeyi gösteriyor olabilir, '200'ancak <input type="number">(örneğin) aslında 200bir tamsayı olarak bir model değeri içerecektir . Dolayısıyla, içinde "görüntülediğiniz" dize temsili <input>, ngModel.$viewValueve sayısal gösterim ngModel.$modelValue.

Başka bir örnek, bir olurdu gibi olurdu şey ve gerçek bir javascript olacağını bu tarihten dizeyi temsil nesne. bu mantıklı mı?<input type="date">$viewValueJan 01, 2000$modelValueDate

Umarım bu sorunun cevabıdır.

Question 3

Bunun gibi şeyleri görebilirsiniz:

$modelValue harici API'nizdir, yani denetleyicinize açık bir şeydir.
$viewValue dahili API'nizdir, onu yalnızca dahili olarak kullanmalısınız.

Düzenleme sırasında $viewValue, "oluşturulmuş model" olduğundan, oluşturma yöntemi çağrılmaz. Bunu manuel olarak yapmanız gerekecek, oysa işleme yöntemi $modelValuedeğişiklikler üzerine otomatik olarak çağrılacaktır .

Bununla birlikte, bilgiler $formattersve sayesinde tutarlı kalacaktır $parsers:

Değiştirirseniz $viewValue, $parserstekrar olarak çevirecektir $modelValue.
Değiştirirseniz $modelValue, $formattersonu $viewValue.

Question 4

Angular, ngModel verilerinin iki görünümünü takip etmek zorundadır - DOM (tarayıcı) tarafından görülen veriler var ve sonra Angular'ın bu değerlerin işlenmiş temsili var. $viewValueDOM yan değerdir. Yani, örneğin, bir in kullanıcı kendi tarayıcısında yazıldığında şeydir. <input>$viewValue

Yazdığında şey kez <input>o zaman $viewValue$ ayrıştırıcıları tarafından işlenir ve denir değer açısal bakış dönüştü $modelValue.

Dolayısıyla $modelValue, değerin işlenmiş hali, modelde gördüğünüz değer, işlenmemiş sürüm olduğunu düşünebilirsiniz $viewValue.

Bunu bir adım daha ileri götürmek için, 'yi değiştiren bir şey yaptığımızı hayal edin $modelValue. Angular bu değişikliği görür ve $ formatters'ı $viewValueDOM'a gönderilmek üzere güncellenmiş (yeni $ modelValue'ya dayalı olarak) oluşturması için çağırır .