[解決済み] ngModel.$modelValueとngModel.$viewValueの違いは何ですか？

質問

以下のckEditorディレクティブを持っています。一番下には、エディタにデータを設定する方法について、私が例から見た2つのバリエーションがあります。

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 には1つの明確な違いがあります。 それはこれです。

すでに上で述べたように

$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 オブジェクトで、その日付文字列を表します。 これは意味があるのでしょうか？

質問の答えになっていれば幸いです。