ngModel。$ modelValue和ngModel。$ viewValue有什么区别

我有以下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.

我不知道作者在文档中写这个是什么意思：-(

您正在寻找正确的文档，但可能只是您有些困惑。该$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将会是Date代表该日期字符串的实际javascript 对象。那有意义吗？

我希望能回答您的问题。

您可以看到类似以下内容：

• $modelValue 是您的外部API，也就是说，向您的控制器公开的东西。
• $viewValue 是您的内部API，则应仅在内部使用。

编辑时$viewValue，将不会调用render方法，因为它是“渲染模型”。您将必须手动执行此操作，而渲染方法将在$modelValue修改后自动调用。

但是，由于$formatters和，信息将保持一致$parsers：

• 如果您进行更改$viewValue，$parsers请将其转换回 $modelValue。
• 如果您更改$modelValue，$formatters将其转换为$viewValue。

Angular必须跟踪ngModel数据的两个视图-有DOM（浏览器）看到的数据，然后是Angular处理的那些值的表示形式。的$viewValue是DOM侧值。因此，例如在中<input>，$viewValue是用户在浏览器中键入的内容。

有人输入内容<input>后$viewValue，将由$ parsers处理，并转换为Angular的名为的视图$modelValue。

因此，您可以将其看作$modelValue是angular的值的处理版本，即您在模型中看到的值，$viewValue而是原始版本。

为了进一步迈出一步，想象我们做一些改变现实的事情$modelValue。Angular看到了这一变化，并调用$ formatters创建一个更新的$viewValue（基于新的$ modelValue）以发送到DOM。