Как получить значение элемента ввода с помощью angular.element('# id')

Когда я пытаюсь получить значение элемента ввода с помощью angular.element, возвращается undefined. Вот мой код: 

$scope.registerUser = function() {
    console.log(angular.element('#username').value); // undefined
    console.log(document.getElementById('username').value); // sampleName
};

Как получить значение с помощью angular.element

Ответы

Ответ 1

Объяснение

Вам следует использовать метод val, похожий на jQuery $.fn.val:

console.log(angular.element('#username').val());

В качестве альтернативы вы можете использовать свойство value для чистого HTMLInputELement:

console.log(angular.element('#username')[0].value);

... потому что экземпляр angular.element представляет собой массив-подобную коллекцию HTMLElements с каждым элементом, доступным по его индексу.

Правильный подход

Но... Вы никогда не должны читать значение ввода, подобное этому, в контексте Angular приложения. Вместо этого используйте ngModel директиву и привяжите входное значение к модели Angular напрямую:

$scope.registerUser = function() {    
    console.log($scope.username);
};

где в HTML есть

<input type="text" ng-model="username">

Ответ 2

Это работает для меня

angular.element(document.getElementById('username')).val();

Ответ 3

Точно так же, как в jQuery, для которого angular.element является оболочкой /sub:

angular.element('#username').val();

Ответ 4

В дополнение к вышеуказанным способам, они также могут быть использованы:

angular.element('[id="username"]').val();
angular.element('[id="username"]')[0].value;