k9yosh k9yosh - 1 month ago 9
AngularJS Question

ng-model fails to bind the values entered with a touch event

I'm using a JQuery + Bootstrap keyboard that is configured specifically only for touch inputs in my Angular app (If i use the mouse to click on the keys, keyboard will close without typing any. It is written to close on on click events).

Mobile-first-Virtual-Keyboard-Plugin-With-jQuery-Bootstrap

My problem is when i enter something to an input box whcih is binded to my controller using ng-model like the following code,

<input autocomplete="false" class="textInputSeeThrough keyboard"
ng-model="patientNIC" type="text" id="nic"
name="patientNICTxtbox" autofocus
placeholder="--- ENTER NIC NUMBER ---">


it does not get binded properly. But if i use plain javascript to traverse the DOM and get the element value in my controller instead of using $scope to get the value, i can get the value properly.

var val1 = $scope.patientNIC; // this doesn't work
var val2 = document.getElementById("nic"); // this works

alert(val1);
alert(val2.value);


So it is clearly not something wrong with the Keyboard. Does angular js have any known problems working with touch events? I couldn't find any. Can someone explain me why this is happening? Thanks in advace.

Answer

Simple answer is: Angular doesn't know about changing in input. Every change must be wrap in $apply or $timeout.

Look at this Update Angular model after setting input value with jQuery