ejemplos - angularjs pdf

¿Cuál es la diferencia entre ngModel. $ ModelValue y ngModel. $ ViewValue

Question

Tengo la siguiente directiva ckEditor. En la parte inferior hay dos variaciones que he visto de ejemplos sobre cómo establecer los datos en el 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);
            };
        }
    };
}])

¿Puede alguien decirme cuál es la diferencia entre:

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

¿Y cuál debería usar? Miré la documentación angular y dice:

$viewValue

Actual string value in the view.

$modelValue

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

No tengo idea de lo que quiso decir el autor cuando escribió esto en el documento :-(

Answer 1

Angular tiene que realizar un seguimiento de dos vistas de los datos de ngModel: están los datos tal como los ve el DOM (navegador) y luego está la representación procesada de Angular de esos valores. $viewValue es el valor del lado DOM. Entonces, por ejemplo, en una <input> $viewValue es lo que el usuario $viewValue en su navegador.

Una vez que alguien escribe algo en <input> , $viewValue es procesado por $ parsers y se convierte en la vista de Angular del valor que se llama $modelView .

Entonces puede pensar en $modelView siendo la versión procesada de angular del valor, el valor que ve en el modelo, mientras que $viewValue es la versión sin $viewValue .

Para dar un paso más, imaginemos que hacemos algo que cambia el $modelView . Angular ve este cambio y llama a $ formateadores para crear un $viewValue actualizado (basado en el nuevo $ modelView) que se enviará al DOM.

Answer 2

Estás viendo la documentación correcta, pero puede ser que estés un poco confundido. $modelValue y $viewValue tienen una clara diferencia. Es esto:

Como ya lo mencionaste arriba:

$viewValue: real de cadena (u objeto) en la vista.
$modelValue: valor en el modelo al que está sujeto el control.

Voy a suponer que su ngModel se está refiriendo a un elemento <input /> ...? Entonces su <input> tiene un valor de cadena que se muestra al usuario, ¿verdad? Pero el modelo real podría ser alguna otra versión de esa cadena. Por ejemplo, la entrada puede mostrar la cadena ''200'' pero el <input type="number"> (por ejemplo) contendrá un valor de modelo de 200 como un entero. Entonces, la representación de cadena que "ve" en la <input> es ngModel.$viewValue y la representación numérica será ngModel.$modelValue .

Otro ejemplo sería un <input type="date"> donde $viewValue sería algo así como el Jan 01, 2000 y $modelValue sería un objeto de Date javascript real que representa esa cadena de fecha. ¿Tiene sentido?

Espero haber respondido a su pregunta.

Answer 3

Puedes ver cosas como esta:

• $modelValue es su API externa, es decir, algo expuesto a su controlador.
• $viewValue es su API interna, debe usarla solo internamente.

Al editar $viewValue , no se llamará al método de renderización porque es el "modelo representado". Tendrás que hacerlo manualmente, mientras que el método de renderización se $modelValue automáticamente sobre las modificaciones de $modelValue .

Sin embargo, la información seguirá siendo coherente, gracias a $formatters y $parsers :

• Si cambia $viewValue , $parsers lo traducirá a $modelValue .
• Si cambia $modelValue , $formatters lo convertirán en $viewValue .