什么是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);

和我应该使用。我看了看角文档和它说：

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 value in the view.
$modelValue: The value in the model, that the control is bound to.

我要假设你ngModel是指一个＆LT;输入/＆GT; 元素......？所以，你的＆LT;输入＆GT; 有它显示给用户，右一个字符串值？但实际的模型可能是字符串的其他版本。例如，输入可能会显示字符串'200'但＆LT;输入类型=数字＆GT; （例如）实际上将包含 200 作为一个整数模型值。因此字符串重新presentation您在视图＆LT;输入方式＆gt; 是 ngModel $ viewValue 和数字重新presentation将是 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.

另一个例子是＆LT;输入类型=日期＆GT; 其中 $ viewValue 会像 2000年1月1日和 $ modelValue 将是一个实际的JavaScript 日期对象重新presents的日期字符串。这是否有意义？

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屋！