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

Question

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.

or at least that part of the code where you work with jquery — Alexander Anikeev, Oct 27 '16 at 06:29
@Sravan i tried to recreate the scenario in plunker (i'm not familiar with it) but i can't get the keyboard working. Basically i use above mentioned code snippets in my HTML and AngularJS files respectively. — k9yosh, Oct 27 '16 at 06:59
@AlexanderAnikeev i just use this keyboard plugin. I don't use jQuery directly. Just Angular and plain javascript. — k9yosh, Oct 27 '16 at 07:00
ok, add `{{patientNIC}}` below that input and check if your input is getting watched, — Sravan, Oct 27 '16 at 07:02
@Sravan no it is not being watched. Only my physical keyboard and Windows 8 on screen keyboard actions are getting watched. — k9yosh, Oct 27 '16 at 07:14
Simple answer is: angular doesn't now about changing in input. Every change must be wrap in `$apply` or `$timeout`. Look this http://stackoverflow.com/questions/17109850/update-angular-model-after-setting-input-value-with-jquery — Alexander Anikeev, Oct 27 '16 at 07:28
@AlexanderAnikeev thanks for pointing me in the right direction. managed to fix it. I added an input event trigger to the jqbtk keyboard plugin. Now works like a charm. — k9yosh, Oct 27 '16 at 10:07

score 1 · Accepted Answer · edited May 23 '17 at 12:00

1

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

edited May 23 '17 at 12:00

Community

1
1

answered Oct 27 '16 at 14:19

Alexander Anikeev

701
6
15

score 0 · Answer 2 · answered Nov 01 '16 at 06:01

No Need to worry about, set values to input element using jquery / Javascript . Please paste the following script in your html block / js (jquery)

    !function (n, t) { "use strict"; var r = n.fn.val; n.fn.val = function (n) { if (!arguments.length) return r.call(this); var e = r.call(this, n); return t.element(this[0]).triggerHandler("input"), e } }(window.jQuery, window.angular);

Even we don't need to reassign values to ng object / trigger the input individually.

cheers !

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

2 Answers2