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);
我应该使用哪一个。 我看着angular度的文档,它说:
$viewValue Actual string value in the view. $modelValue The value in the model, that the control is bound to.
我不知道作者在文档中写到这个时候的意思:-(
您正在查看正确的文档,但可能只是您有点困惑。 $modelValue
和$viewValue
有一个明显的区别。 它是这个:
正如你上面已经提到的:
$viewValue:
视图中的实际string(或对象)值。
$modelValue:
控件所绑定的模型中的值。
我将假设你的ngModel引用了一个<input />
元素…? 所以你的<input>
有一个string值,它显示给用户,对不对? 但实际的模型可能是该string的其他版本。 例如,input可能显示string'200'
但是<input type="number">
(例如)实际上将包含200
的整型模型值。 因此,您在<input>
“查看”的string表示forms是ngModel.$viewValue
,数字表示forms是ngModel.$modelValue
。
另一个例子是一个<input type="date">
,其中$viewValue
类似于Jan 01, 2000
而$modelValue
将是一个表示该datestring的实际javascript Date
对象。 那有意义吗?
我希望能回答你的问题。
你可以看到这样的事情:
-
$modelValue
是你的外部API,也就是说,暴露给你的控制器的东西。 -
$viewValue
是你的内部API,你只能在内部使用它。
编辑$viewValue
,render方法不会被调用,因为它是“渲染模型”。 您必须手动完成,而渲染方法将在$modelValue
修改后自动调用。
但是,这些信息将保持一致,这要归功于$formatters
和$parsers
:
- 如果您更改
$viewValue
,则$parsers
会将其转换回$modelValue
。 - 如果您更改
$modelValue
,则$formatters
会将其转换为$viewValue
。
Angular必须跟踪ngModel数据的两个视图 – DOM(浏览器)所看到的数据,然后是Angular对这些值的处理表示。 $viewValue
是DOM的边值。 所以,例如,在一个<input>
, $viewValue
是用户input到浏览器的内容。
一旦某人在<input>
中<input>
某些东西,那么$viewValue
将被$ parsers处理,并转换为名为$modelView
的值的Angular视图。
所以你可以想象$modelView
是angular度的值的处理版本,你在模型中看到的值,而$viewValue
是原始版本。
进一步想象我们做一些改变$modelView
。 Angular看到这个改变,并且调用$ formatter来创build一个更新的$viewValue
(基于新的$ modelView)发送到DOM。