angularjs - 为什么我的事件处理程序总是落后一个按键,而 $timeout 如何解决这个问题?

标签 angularjs angularjs-directive

我很困惑为什么我的按键事件处理程序总是落后一个按键。 http://plnkr.co/edit/w3FAXGd5zjrktO6DgOpD?p=preview

<body ng-controller="myController">
  <form>
    <input ng-keypress="handleKeypress($event)" />
  </form>
</body>

Controller :
myapp.controller('myController', function($scope, $timeout){

    $scope.handleKeypress = function(ev){

      console.log(ev.target.value); //always one keystroke behind

      //$timeout(function(){console.log(ev.target.value);}); //works!

    };
}); 

为什么需要 $timeout 以及它为什么/如何工作? (最好是新手友好的答案)

我知道使用 keypress 事件时,字符尚未插入到 DOM 中,但我很困惑,因为 angularjs.org 中的 Hello World 示例|在释放键之前响应。他们的示例没有使用自定义事件处理程序,但很明显 Angular 在 keyup 事件之前更新模型,所以我想了解更多关于在自定义事件处理程序中执行此操作的信息。

idursun 的回答指出 event.which 在按键上可用,我认为 Angular 可能正在使用 String.fromCharCode() ,但我在 Angular 源中没有看到任何与此相关的内容。

最佳答案

您应该使用 ng-keyup . Keypress 可能并不总是按预期工作。

从 jQuery 文档:

注:由于 keypress 事件未包含在任何官方规范中,因此使用它时遇到的实际行为可能因浏览器、浏览器版本和平台而异。

关于angularjs - 为什么我的事件处理程序总是落后一个按键,而 $timeout 如何解决这个问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21194098/

相关文章:

angularjs - 重复部分上多个字段的 Angular 形式的自定义验证

javascript - 使用ngroute传递参数

AngularJS 观察 DOM 变化

javascript - 无法读取 AngularJS Ionic 中未定义的属性数据传输

javascript - 如何使 ng-repeat 与返回新对象的函数一起工作?

javascript - flot x 轴刻度标签未与更改数据上的堆栈条形图对齐

javascript - 如何在 Angular UI-Grid 中获取列页脚数据?

javascript - 如何测试仅用作模板的指令

angularjs - Angular 中为自定义指令保留的命名空间?

angularjs - 指令链接函数执行顺序