angularjs - 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);

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

$viewValue

Actual string value in the view.

$modelValue

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

我不知道作者在文档中写下此内容时的意思:-(

Answer 1

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

正如您上面已经指出的:

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

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

另一个例子是 <input type="date">其中$viewValue会像 Jan 01, 2000和 $modelValue将是一个实际的 javascript Date表示该日期字符串的对象。这有道理吗？

我希望这能回答您的问题。