为什么$document.on('keydown')晚了一个
why $document.on('keydown') is one late?
我有一个控制器,它注入$document
以捕获keydown
事件。但这个事件总是晚一个按键。
我有另一种方法,在<body>
中使用ng-keydown
中的$broadcast
,效果很好。
我的问题是:$document.on('keydown', ...)
出了什么问题?
下面是一个工作示例:
<body ng-app="app" ng-keydown="$broadcast('mykeydown', $event);">
<div ng-controller="BroadcastController">
key down by broadcast: {{keycode}}
</div>
<div ng-controller="KeyFromDocController">
key down from $document : {{keycode}} <br>[always one late !!!]
</div>
</body>
<script>
angular.module('app', [])
.controller('BroadcastController', function($scope) {
$scope.keycode = '?';
$scope.$on('mykeydown',function(msg,evt) {
$scope.keycode = evt.which;
});
})
.controller('KeyFromDocController', function($scope,$document) {
$scope.keycode = '?';
$document.on('keydown',function(evt) {
$scope.keycode = evt.which;
});
});
</script>
你可以在这里测试http://plnkr.co/edit/omhTiLi31BnEwrSwk75A
如果你这样做了,你不应该这样做,就不会像你说的那样"迟到一次":
$document.on('keydown',function(evt) {
$scope.keycode = evt.which;
$scope.$apply();
});
示例
在Angular中,您不应该从控制器执行此类操作,而是从指令执行此类操作。DOM操作和DOM事件属于指令,具体而言属于指令的link
函数。
当您注册这样的事件时,会发生的情况是,您正在控制器内注册该事件,但当事件get被触发时,angular对该函数一无所知,因此您必须调用$apply
才能触发$diggest
循环,该循环将重新评估和刷新视图的表达式。
相关文章:
- 如何在一个网页网站中处理基于document.write()的广告标签
- 从另一个窗口访问document.getElementById
- 为什么一个 $(document).ready(function() { 会阻止另一个运行
- 为什么我们被教导将document.getElementById(“id”)分配给一个变量,然后将该变量与属性一起使用
- Javascript——为什么一个document.getElementById()有效,而另一个无效
- 在document-mongoDB中设置一个字段
- 如何获得一个就绪函数和另一个函数在 document.ready 中很好地播放
- TypeError: undefined 不是一个函数(评估 'document.getsElementsByC
- 我如何在 html 中复制(甚至有一个按钮来选择它)一个 document.getelementbyid 输出字段
- 未捕获的类型错误:document.title 不是一个函数,第 31 行
- 如果网站在框架/ iframe内,则document.referer将始终包含一个值
- Rails JavaScript 包含 TypeError:“null”不是一个对象(评估 'document.
- 从另一个页面 PHP/javascript 获取 document.getElementsByName
- 一个或多个 $(document).ready
- document.activeElement 返回一个 XULElement
- document.getElementById 适用于一个表单元素,但不适用于另一个表单元素
- 多个 document.createElement 在一个函数中返回事件侦听器
- 按钮的 ID 更改,但 document.ready 函数调用前一个值的方法
- 创建一个Document对象,在其中运行JavaScript,并获得最终的HTML
- 为什么我的函数只工作一次(做一个document.write()作业)