Qual è la differenza tra ngModel. $ ModelValue e ngModel. $ ViewValue

Ho la seguente direttiva ckEditor. In basso ci sono due varianti che ho visto da esempi su come impostare i dati nell'editor:

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

Qualcuno può dirmi qual è la differenza tra:

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

E quale dovrei usare. Ho guardato la documentazione angolare e dice:

$viewValue

Actual string value in the view.

$modelValue

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

Non ho idea di cosa intendesse l'autore quando ha scritto questo nel documento :-(

Stai guardando la documentazione corretta, ma potrebbe essere solo che sei un po 'confuso. L' $modelValuee $viewValuehanno una chiara differenza. È questo:

Come hai già notato sopra:

$viewValue:Valore effettivo della stringa (o dell'oggetto) nella vista.
$modelValue:Il valore nel modello a cui è associato il controllo.

Presumo che il tuo ngModel si riferisca a un <input />elemento ...? Quindi il tuo <input>ha un valore stringa che mostra all'utente, giusto? Ma il modello effettivo potrebbe essere un'altra versione di quella stringa. Ad esempio, l'input potrebbe mostrare la stringa '200'ma <input type="number">(per esempio) in realtà conterrà un valore di modello 200come numero intero. Quindi la rappresentazione di stringa che "vedi" in <input>è il ngModel.$viewValuee la rappresentazione numerica sarà il ngModel.$modelValue.

Un altro esempio potrebbe essere un <input type="date">dove $viewValuesarebbe qualcosa di simile Jan 01, 2000e $modelValuesarebbe un vero Dateoggetto javascript che rappresenta quella stringa di data. Ha senso?

Spero che risponda alla tua domanda.

Puoi vedere cose come questa:

• $modelValue è la tua API esterna, vale a dire, qualcosa esposto al tuo controller.
• $viewValue è la tua API interna, dovresti usarla solo internamente.

Durante la modifica $viewValue, il metodo render non sarà chiamato, perché è il "modello renderizzato". Dovrai farlo manualmente, mentre il metodo di rendering verrà chiamato automaticamente in caso di $modelValuemodifiche.

Tuttavia, le informazioni rimarranno coerenti, grazie a $formatterse $parsers:

• Se lo modifichi $viewValue, $parserslo tradurrà di nuovo in $modelValue.
• Se lo modifichi $modelValue, $formatterslo convertirà in $viewValue.

Angular deve tenere traccia di due visualizzazioni dei dati di ngModel: ci sono i dati visti dal DOM (browser) e poi c'è la rappresentazione elaborata di Angular di quei valori. Il $viewValueè il valore lato DOM. Così, per esempio, in un <input>l' $viewValueè ciò che l'utente ha digitato al proprio browser.

Una volta che qualcuno scrive qualcosa in <input>poi $viewValueviene processato da $ parser e trasformati in vista di angolare del valore che si chiama $modelValue.

Quindi puoi pensare di $modelValueessere la versione elaborata di angular del valore, il valore che vedi nel modello, mentre $viewValueè la versione grezza.

Per fare un ulteriore passo avanti, immagina di fare qualcosa che cambi il file $modelValue. Angular vede questa modifica e chiama $ formatters per creare un aggiornamento $viewValue(basato sul nuovo $ modelValue) da inviare al DOM.