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);

そして、どれを使うべきか。私は角度のドキュメントを見て、それは言います：

$viewValue

Actual string value in the view.

$modelValue

The value in the model, that the control is bound to.

著者がこれを文書に書いたときに私が何を意味していたのか私にはわかりません:-(

正しいドキュメントを見ていますが、少し混乱しているだけかもしれません。$modelValueそして$viewValue1つの明確な違いがあります。これです：

上記のとおり、

$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 オブジェクトです。それは理にかなっていますか？

それがあなたの質問に答えることを願っています。

あなたはこのようなものを見ることができます：

• $modelValue 外部APIです。つまり、コントローラーに公開されているものです。
• $viewValue 内部APIです。内部でのみ使用してください。

編集時$viewValueに、renderメソッドは「レンダリングされたモデル」であるため、呼び出されません。手動で行う必要がありますが、レンダリングメソッドは$modelValue変更時に自動的に呼び出されます。

しかし、情報は、おかげで一貫性を維持します$formattersと$parsers：

• 変更すると$viewValue、$parsersに翻訳され $modelValueます。
• 変更すると$modelValue、$formattersに変換され$viewValueます。

AngularはngModelデータの2つのビューを追跡する必要があります-DOM（ブラウザ）によって見られるようなデータがあり、それらの値のAngularの処理された表現があります。$viewValueDOM側の値です。したがって、たとえば、中にユーザーがブラウザに入力した内容です。 <input>$viewValue

誰かの種類が何かしたら<input>、その後は$viewValue$パーサによって処理され、呼び出された値の角度のビューになっています$modelValue。

したがって$modelValue、angularが処理した値のバージョンであると考えることができます$viewValue。モデルに表示される値は、生のバージョンです。

この一歩を踏み出すために、私たちがを変える何かをすることを想像してみてください$modelValue。Angularはこの変更を認識し、$ formattersを呼び出し$viewValueて、DOMに送信される更新された（新しい$ modelValueに基づいて）を作成します。