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对象，代表该{{1}}日期字符串。这有意义吗？

我希望能回答你的问题。

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。

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

3 个答案: