Почему значения ng-модели Angular не отражаются в веб-браузере веб-браузера

Question

Мне интересно, почему я не вижу отображаемые входные текстовые значения в веб-браузере веб-браузера, когда данные представлены AngularJS ng-моделью.

См. Следующий фрагмент кода:

https://www.w3schools.com/angular/tryit.asp?filename=try_ng_databinding_ng-model

Я хотел бы полагаться на веб-инспектора таким образом, чтобы видеть все, что я уже вижу на веб-странице, однако в этом случае элемент <input> в веб-инспекторе представляет следующий код без ожидаемоготекстовое значение "Джон":

<input ng-model="firstname" class="ng-pristine ng-untouched ng-valid ng-not-empty">

Почему это так?Какие механизмы веб-браузера работают здесь, чтобы мы увидели расхождения между отображаемым содержимым и содержимым веб-инспектора, которые, если я не ошибаюсь, представляют собой то же содержимое, что и оно.

Answer 1

Собственно значение ввода хранится в файле input.value для ввода, это не то, что вы сможете увидеть в проводнике элементов в вашем отладчике.

Есть два хорошихспособы оценки этого,

(при условии, что вы используете chrome, я уверен, что есть эквиваленты в других браузерах)

Вы можете использовать проводник Elements, чтобы выделить конкретный узел ввода и записать его значениев консоли Chrome, набрав

$0.value

$ 0, вы получите узел, который вы в последний раз выделяли на экране элементов

В консоли вы должны увидеть что-то подобное, заменив мой бред на ваштекстовое значение.

Второй более «угловой» способ сделать это - вместо этого ввести

angular.element($0).controller('ngModel').$viewValue;

angular.element ($ 0) обернет входные данные в объект jqlite, который можно затем вызвать .controller для получения контроллера ngModel этого узла DOM.Оттуда вы можете получить значение $ viewValue для ввода.

Вы также можете использовать это для получения достоверности и другой полезной информации, которая может быть очень полезна при написании тестов компонентов.