ngModel.$modelValue 和 ngModel.$viewValue 有什么区别 [英] What's the difference between ngModel.$modelValue and ngModel.$viewValue

问题描述

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

I have the following ckEditor directive. At the bottom are two variations that I have seen from examples on how to set the data in the 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);
            };
        }
    };
}])

谁能告诉我两者有什么区别:

Can someone tell me what is the difference between:

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

我应该使用哪个.我查看了 angular 文档，它说:

And which should I use. I looked at the angular documentation and it says:

$viewValue

Actual string value in the view.

$modelValue

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

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

I have no idea what the author meant when he wrote this in the document :-(

推荐答案

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

You are looking at the correct documentation, but it might just be that you're a little confused. The $modelValue and $viewValue have one distinct difference. It is this:

如上所述:

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

$viewValue: Actual string (or Object) value in the view.
$modelValue: The value in the model, that the control is bound to.

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

I'm going to assume that your ngModel is referring to an <input /> element...? So your <input> has a string value that it displays to the user, right? But the actual model might be some other version of that string. For example, the input might be showing the string '200' but the <input type="number"> (for example) will actually contain a model value of 200 as an integer. So the string representation that you "view" in the <input> is the ngModel.$viewValue and the numeric representation will be the ngModel.$modelValue.

另一个示例是 <input type="date">，其中 $viewValue 类似于 Jan 01, 2000> 和 $modelValue 将是一个实际的 javascript Date 对象，表示该日期字符串.有意义吗?

Another example would be a <input type="date"> where the $viewValue would be something like Jan 01, 2000 and the $modelValue would be an actual javascript Date object that represents that date string. Does that make sense?

希望能回答您的问题.

这篇关于ngModel.$modelValue 和 ngModel.$viewValue 有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！