ngModel。$ modelValue和ngModel。$ viewValue之间有什么区别？(What's the difference between ngModel.$modelVa

ngModel。$ modelValue和ngModel。$ viewValue之间有什么区别？(What's the difference between ngModel.$modelValue and 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.

我不知道作者在文件中写道：

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有一个明显的区别。 就是这样

如上所述：

$viewValue:视图中的实际字符串（或Object）值。 $modelValue:模型中的值，控件被绑定。

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

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

我希望能回答你的问题。

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:

As you already noted above:

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

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.

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?

I hope that answers your question.