如何在AngularJS中使用getElementById

Question

I have this code in javascript:

<script>
var recognition;
document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    recognition = new SpeechRecognition();
    recognition.onresult = function(event) {
        if (event.results.length > 0) {
            q.value = event.results[0][0].transcript;
            q.form.submit();
        }
    }
}
</script>
<form action="http://www.example.com/search">
    <input type="search" id="q" name="q" size=60>
    <input type="button" value="Click to Speak" onclick="recognition.start()">
</form>

How do I use getElementById with AngularJS? The line q.value = event.results[0][0].transcript; is intended to insert what users input through speech recognition into an element q (which is used as a textbox). How do I do that in AngularJS?

Answer 1

To get an element by its id, class, attribute, etc. you can use the built-in angular.element , which is a jQuery lite version for DOM manipulation.

If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery, called "jQuery lite" or jqLite.

var q = angular.element('#q');
q.val(event.results[0][0].transcript);
q.focus();

Answer 2

You make use of the angular directive ng-model, add

ng-model="speechtext"

to your textfield and in your code you define the scope variable speechtext:

$scope.speechtext = q //or just the variable where the result is hold