Angular Js : How to get input value using AngularJS functions

Question

I want to access form input value in services.

var emailId = document.getElementById("save_quote_email").value; console.log("emailId="+emailId); console.log("emailId2="+angular.element('#save_quote_email').val()); 

I am able to get value using document.getElementById("save_quote_email").value but not using angular function angular.element('#save_quote_email').val()

It gives error

Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.elementhttp://errors.angularjs.org/1.2.16/jqLite/nosel

Please view this plunker http://plnkr.co/edit/Op1QDwUBECAosPUC7r3N?p=preview for complete code.

in dtoresource.js line numbe2 21.

Answer 1

You can't use angular.element to select by id or some other selector Link provide by you give full info as below

"Note: Keep in mind that this function will not find elements by tag name / CSS selector. For lookups by tag name, try instead angular.element(document).find(...) or $document.find(), or use the standard DOM APIs, e.g. document.querySelectorAll()"

you may use document.query selector as follow

 var queryResult = document.querySelector('#save_quote_email'); var emailId2 = angular.element(queryResult); 

Here is working plunker http://plnkr.co/edit/mC0JKTZpdnvqyBpihLRW?p=preview

Also this https://stackoverflow.com/a/23626251/5621827 will help you to understand it batter

Answer 2

Instead of trying to answer your question I am going to rather direct you to the correct way of using Angular. You should never try and select input values, that is what ng-model is for. ng-model bind the input to a value. As soon as the value changes Angular automatically updates the scope value, no functions of getting data necessary.

I can't make heads or tails out of your plunkr code but you should not do this:

var queryResult = document.querySelector('#save_quote_email'); 

Also you are trying to access the DOM from a factory, you should rather pass the needed value to an exposed function of the factory and call the function in your controller.

In your controller autoQuoteCtrl you should use a simply scope value for your input like so:

$scope.email = ""; 

And in your index the input should read:

<input type='text' ng-model="email" /> {{ email }} 

Do not use convoluted variables like AutoQuote.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails[0].EmailAddress in your scopes, you should assign the values when they are received from the resource.

$http({url: url}).then(function (rs) { $scope.email = rs.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails[0].EmailAddress; }