Яка різниця між 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);

І який я повинен використовувати. Я подивився кутову документацію і там написано:

$viewValue

Actual string value in the view.

$modelValue

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

Я поняття не маю, що мав на увазі автор, коли писав це в документі :-(

Ви переглядаєте правильну документацію, але може бути, що ви трохи розгублені. $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, який представляє цей рядок дати. Чи має це сенс?

Сподіваюся, це відповідає на ваше запитання.

Ви можете побачити такі речі:

• $modelValue це ваш зовнішній API, тобто щось, що впливає на ваш контролер.
• $viewValue це ваш внутрішній API, ви повинні використовувати його лише внутрішньо.

Під час редагування $viewValueметод візуалізації не буде викликаний, оскільки це "візуалізована модель". Вам доведеться робити це вручну, тоді як метод візуалізації буде викликаний автоматично при $modelValueвнесенні змін.

Однак інформація залишатиметься послідовною завдяки $formatters та $parsers:

• Якщо зміниш $viewValue , $parsersперекладе його назад на $modelValue.
• Якщо змінити $modelValue, $formattersперетворить його на $viewValue.

Angular повинен відстежувати два перегляди даних ngModel - є дані, як їх бачить DOM (браузер), а потім є оброблене представлення цих значень Angular. Це $viewValueпобічне значення DOM. Так, наприклад, в<input>$viewValue це те, що користувач набрав у своєму браузері.

Після того, як хто - то типи що - то в <input>то $viewValueобробляються $ аналізаторів і перетворився в поле зору ANGULAR про вартість , яка називається $modelValue.

Таким чином, ви можете думати, $modelValueщо це оброблена версія angular значення, значення, яке ви бачите в моделі, а $viewValueє вихідною версією.

Щоб зробити цей крок далі, уявіть, що ми робимо щось, що змінює $modelValue. Angular бачить цю зміну і закликає $ $viewValue-форматори створити оновлену (на основі нової $ modelValue), яка буде надіслана до DOM.