跟踪输入中的更改[type=text]

Track changes in a input[type=text]

本文关键字:type text 输入 跟踪      更新时间:2023-09-26

我使用AngularJS应用程序并将属性绑定到字段$rootScope.person:

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

然而,显示的值似乎与跟踪的值不同,如下所示:

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

如何跟踪修改文本框值的对象或函数?我试着做

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

然后在该函数中放置一个断点以跟随stackTrace。。。

但只有当用户手动修改值时,才会捕捉到这个。。。有没有一种方法可以捕捉输入中文本更改的所有来源?

一些代码例如:

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"/>

由于我无法重现本例中的"bug",我希望有任何方法来检测更改值的函数(在这种情况下,当我按下按钮时)是change(),我的意思是每次值更改时都要识别值更改的来源。。。

这是类似于这个问题的一种重复。

object-watch.js polyfill似乎很方便。

看看它在这个小提琴中应用于你的案例:http://jsfiddle.net/masa671/c6vge629/.打开调试器。铬测试。