Track changes in a input[type=text]

Question

I use an AngularJS application and bind a property to a field $rootScope.person:

<input type='text' ng-model='person.name'/>

However, the displayed value seems to be different from the tracked one, like this:

$rootScope.$watch('person.name', function (nv) {
    if (nv) {
        console.log('$rootScope.person changed: ');
        console.log(nv);
     }
});

How is it possible to track the object or function that modifies the textbox value? I tried to do an

<input type='text' ng-model='person.name' oninput="myTrackFunction()"/>

and then put a breakpoint in that function to follow the stackTrace...

But this one is caught only if the user modifies the value by hand... is there a way to catch all sources of the text change in that input?

Some code as example:

var app = angular.module('myApp', []);
app.run(function($rootScope){
  $rootScope.person = {name:'Brain', age:20};
  $rootScope.change = function(){
    $rootScope.person.name = Math.random().toString(36)
                           .replace(/[^a-z]+/g, '').substr(0, 5);
  }
});

<script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<div ng-app='myApp'>
  <input type=text ng-model='person.name'>
  person.name is {{person.name}}
  <input type=button ng-click="change()" value="change"/>

As I can't reproduce the "bug" in this example, I'd like to have any way to detect that the function that changes the value (when I press the button iny case) is change(), I mean identify the source of value change each time the value is changed...

Is the sole purpose of the `input` to display the value of `person.name`, or do you want to be able to change `person.name` in this `input`? — Arg0n, Nov 26 '15 at 17:50
@Arg0n Yes, user are able to change the value of the input... but also input should be preloaded, say, with the catched/session value for the first time by eg.... — serge, Nov 26 '15 at 18:05

score 0 · Accepted Answer · edited May 23 '17 at 12:15

0

This is a kind of duplicate to questions like this one.

object-watch.js polyfill seems handy.

See it applied to your case in this fiddle: http://jsfiddle.net/masa671/c6vge629/. Open the debugger. Tested in Chrome.

edited May 23 '17 at 12:15

Community

1
1

answered Nov 26 '15 at 21:00

masa

2,762
3
21
32

Track changes in a input[type=text]

1 Answers1