问题描述
您正在寻找正确的文档,但可能只是您有些困惑。该$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 对象。那有意义吗?
我希望能回答您的问题。
解决方法
我有以下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.
我不知道作者在文档中写这个是什么意思:-(