ngModel.$ modelValue和ngModel.$ viewValue之间的区别是什么

Question

我有以下ckEditor指令.在底部是我从如何在编辑器中设置数据的示例中看到的两个变体:

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

有人能告诉我有什么区别:

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

我应该使用哪个.我查看了角度文档,它说:

$viewValue

Actual string value in the view.

$modelValue

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

我不知道作者在文档中写这个时的意思:-(

Answer 1

您正在查看正确的文档,但可能只是您有点困惑.该$modelValue和$viewValue有一个明显的区别.就是这个:

如上所述:

$viewValue:视图中的实际字符串(或对象)值.
$modelValue:模型中的值,控件绑定到的值.

我假设您的ngModel指的是一个<input />元素......？所以你<input>有一个它显示给用户的字符串值,对吗？但实际模型可能是该字符串的其他版本.例如,输入可能显示字符串,'200'但<input type="number">(例如)实际上将包含200作为整数的模型值.所以你在"查看"的字符串表示<input>是ngModel.$viewValue和数字表示将是ngModel.$modelValue.

另一个例子是<input type="date">,其中$viewValue会像Jan 01, 2000和$modelValue将是一个实际的JavaScript Date对象表示日期字符串.那有意义吗？

我希望能回答你的问题.

Answer 2

你可以看到这样的事情:

• $modelValue 是你的外部API,也就是暴露给你的控制器的东西.
• $viewValue 是您的内部API,您应该只在内部使用它.

编辑时$viewValue,不会调用render方法,因为它是"渲染模型".您必须手动完成,而渲染方法将在$modelValue修改时自动调用.

但是,由于$formatters和$parsers以下信息,信息将保持一致:

• 如果你改变$viewValue,$parsers将把它翻译回来 $modelValue.
• 如果您更改$modelValue,$formatters将转换为$viewValue.

Answer 3

Angular必须跟踪ngModel数据的两个视图 - 这是DOM(浏览器)看到的数据,然后是Angular处理过的那些值的表示.这$viewValue是DOM边值.因此,例如,在<input>将$viewValue是用户键入的内容到他们的浏览器.

一旦某人输入了某些东西,<input>然后$viewValue由$ parsers处理并转换为Angular的被调用值的视图$modelValue.

因此,您可以考虑使用$modelValue角度处理的值的版本,您在模型中看到的值,而$viewValue原始版本.

为了进一步想象,我们做了一些改变的事情$modelValue.Angular看到了这种变化,并调用$ formatters来创建一个更新的$viewValue(基于新的$ modelValue)发送给DOM.