Qual é a diferença entre ngModel. $ ModelValue e ngModel. $ ViewValue

Eu tenho a seguinte diretiva ckEditor. Na parte inferior, estão duas variações que vi nos exemplos de como definir os dados no 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);
            };
        }
    };
}])

Alguém pode me dizer qual é a diferença entre:

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

E qual devo usar. Eu olhei a documentação angular e dizia:

$viewValue

Actual string value in the view.

$modelValue

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

Não tenho ideia do que o autor quis dizer quando escreveu isso no documento :-(

Você está vendo a documentação correta, mas pode ser que esteja um pouco confuso. Os $modelValuee $viewValuetêm uma diferença distinta. É isto:

Como você já observou acima:

$viewValue:Valor real da string (ou objeto) na visualização.
$modelValue:O valor no modelo ao qual o controle está vinculado.

Vou supor que seu ngModel está se referindo a um <input />elemento ...? Portanto, seu <input>tem um valor de string que exibe ao usuário, certo? Mas o modelo real pode ser alguma outra versão dessa string. Por exemplo, a entrada pode mostrar a string, '200'mas <input type="number">(por exemplo) conterá na verdade um valor de modelo de 200como um inteiro. Portanto, a representação de string que você "vê" no <input>é o ngModel.$viewValuee a representação numérica será o ngModel.$modelValue.

Outro exemplo seria um <input type="date">em $viewValueque seria algo como Jan 01, 2000e $modelValueseria um Dateobjeto javascript real que representa aquela string de data. Isso faz sentido?

Espero que isso responda a sua pergunta.

Você pode ver coisas assim:

• $modelValue é a sua API externa, ou seja, algo exposto ao seu controlador.
• $viewValue é sua API interna, você deve usá-la apenas internamente.

Ao editar $viewValue, o método de renderização não será chamado, pois é o "modelo renderizado". Você terá que fazer isso manualmente, enquanto o método de renderização será chamado automaticamente após as $modelValuemodificações.

No entanto, as informações permanecerão consistentes, graças a $formatterse $parsers:

• Se você mudar $viewValue, $parserso traduzirá de volta para $modelValue.
• Se você alterar $modelValue, $formatterso converterá em $viewValue.

O Angular precisa manter o controle de duas visualizações dos dados do ngModel - há os dados conforme vistos pelo DOM (navegador) e, em seguida, há a representação processada do Angular desses valores. O $viewValueé o valor do lado DOM. Assim, por exemplo, em uma <input>o $viewValueé o que o usuário digitou no seu browser.

Uma vez que alguém digita algo <input>, $viewValueé processado por $ parsers e transformado na visão do Angular do valor que é chamado $modelValue.

Portanto, você pode pensar em $modelValueser a versão processada do valor do angular, o valor que você vê no modelo, enquanto $viewValueé a versão bruta.

Para dar um passo adiante, imagine que fazemos algo que muda o $modelValue. Angular vê essa mudança e chama $ formatters para criar um valor atualizado $viewValue(baseado no novo $ modelValue) a ser enviado ao DOM.