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

Question

Ho la seguente direttiva ckEditor. In fondo sono due varianti che ho visto dagli 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 che dovrei uso. Ho guardato la documentazione angolare e si dice:

$viewValue 

Actual string value in the view. 

$modelValue 

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

Non ho idea di quello che l'autore intendeva quando ha scritto questo nel documento :-(

Answer 1

State guardando la documentazione corretta, ma potrebbe essere solo che sei un po 'confuso Il $modelValue e $viewValue hanno una chiara differenza è questa:..

Come già notato in precedenza:

$viewValue: Stringa effettiva (o Oggetto) valore nella vista.
$modelValue: Il valore nel modello a cui è associato il controllo.

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

Un altro esempio sarebbe un <input type="date"> dove il $viewValue sarebbe qualcosa come Jan 01, 2000 e $modelValue sarebbe un oggetto effettivo JavaScript Date che rappresenta la stringa data. Ha senso?

Spero che risponda alla tua domanda.

Answer 2

Angolare deve tenere traccia di due viste dei dati di ngModel: ci sono i dati visti dal DOM (browser) e poi c'è la rappresentazione elaborata di Angular di quei valori. Lo $viewValue è il valore del lato DOM. Ad esempio, in un <input> lo $viewValue è l'utente che ha digitato nel proprio browser.

Una volta che qualcuno digita qualcosa in <input> allora $viewValue viene elaborato da $ parser e convertito in vista Angolare del valore che viene chiamato $modelView.

Così si può pensare di essere $modelView versione angolare elaborata del valore, il valore che si vede nel modello, mentre $viewValue è la versione grezza.

Per fare un ulteriore passo avanti immagina di fare qualcosa che cambi lo $modelView.Angular vede questo cambiamento e chiama $ formatters per creare un $viewValue aggiornato (basato sul nuovo $ modelView) da inviare al DOM.

Answer 3

È possibile vedere le cose in questo modo:

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

Quando si modifica $viewValue, il metodo di rendering non verrà chiamato, perché è il "modello di rendering". Dovrai farlo manualmente, mentre il metodo di rendering verrà chiamato automaticamente su $modelValue modifiche.

Tuttavia, le informazioni rimarranno coerenti, grazie alla $formatters e $parsers:

• Se si cambia $viewValue, $parsers si tradurrà di nuovo a $modelValue.
• Se si modifica $modelValue, $formatters sarà convertirlo in $viewValue.