значение привязки поля ввода в angularjs

У меня странное поведение в моем браузере с полем ввода. Когда я проверяю его в консоли разработчика, это выглядит так:

<input type="text" name="siteName" ng-model="model.name" minlength="3"
       maxlength="40" ng-disabled="!model.isEditable || disableUpdate"
       required=""
       class="ng-pristine ng-untouched ng-empty ng-valid-namevalidation ng-invalid ng-invalid-required ng-valid-minlength ng-valid-maxlength">

После отображения страницы в консоли разработчика Chrome я выбираю это поле ввода следующим образом:

var x = document.querySelector('input[name="siteName"]')

и я получаю это в консоли. Это поле ввода имеет значение в пользовательском интерфейсе (строка, не пустая) - заполняется angularjs таким образом: ng-model="model.name". model.name имеет допустимое строковое значение.

когда я вызываю x.value в консоли, я получаю пустую строку.

Более того, в консоли разработчика Chrome при проверке элемента я могу получить к нему доступ, используя $0. И $0.value возвращает мне правильное значение.

У кого-нибудь была такая проблема? Любая идея, как получить с помощью селектора запросов значение для поля ввода?

Спасибо.


angularjs queryselector
person Zelter Ady    schedule 01.08.2019    source источник
comment
Зависит от того, когда вы это называете. Возможно, до того, как angular скомпилировал эту ng-модель   -  person charlietfl    schedule 01.08.2019
comment
AngularJS не был разработан для того, чтобы вы получали ценность таким образом. Это не странное поведение, просто так работает AngularJS. В зависимости от того, где вы находитесь в цикле дайджеста, значение может быть разным.   -  person Pop-A-Stash    schedule 01.08.2019
comment
Установите это расширение. позволяют вам проверять свойства области любого элемента на вкладке элементов в инструментах разработчика   -  person Alon Eitan    schedule 01.08.2019
comment
Как я уже упоминал, эта проблема возникла в консоли после полной загрузки страницы и отображения текста (значения) в поле ввода.   -  person Zelter Ady    schedule 02.08.2019
comment
Элемент <input> показывает элемент после того, как он был обработан фреймворком AngularJS. Что это до того, как AngularJS изменит его.   -  person georgeawg    schedule 04.08.2019

Ответы (2)


arrow_upward
1
arrow_downward

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

попробуй angular.element(document.querySelector("<selectors>")).scope()

вы можете получить больше информации об этом запросе в следующем ответе

Как получить доступ к переменной $scope в консоли браузера с помощью AngularJS?

person Ajanthan Mani    schedule 04.08.2019

arrow_upward
0
arrow_downward

Когда код изменяет значения $scope, инфраструктуре AngularJS требуется цикл дайджеста для обновления DOM, а браузеру требуется отметка для отображения изменений в DOM.

Используйте службу $timeout для ожидания перед проверкой элементов DOM:

app.controller("ctrl",function($scope, $timeout) {
     $scope.model = { name: "siteXXXX" };

     var x = document.querySelector('input[name="siteName"]');
     console.log("before ",x.value);  //undefined

     //ADD time to render
     $timeout(function() {
       console.log("after", x.value); //siteXXXX
     });
})

ДЕМО на PLNKR

Для получения дополнительной информации см.

person georgeawg    schedule 01.08.2019
comment
Джордж, эта проблема возникла, когда я пытаюсь получить это значение из консоли разработчика в Chrome после полной загрузки страницы. - person Zelter Ady; 02.08.2019