Question

我花了很多时间研究angular.js中的ng-keypress属性，我不知道为什么这不起作用。我的特定元素是一个canvas元素，虽然我已经看到了其他问题处理其他元素。这种情况试图将一个按键监听器放在一个canvas元素上，除了ng属性指令之外，所有添加该监听器的形式似乎都有效。这是我的意思的一个例子

angular.element('.lastExample').on('keypress',function(event){
  alert('and so does this');
  });

canvas{
  border:solid;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<canvas tabindex='1' ng-keypress="alert('this does not work')">canvas not supported</canvas>
<canvas tabindex='1' onkeypress="alert('but this one works')">canvas not supported</canvas>
<canvas tabindex='1' class='lastExample'>canvas not supported</canvas>

我已经应用了这个技巧来允许元素聚焦（tabindex='1'）并使用on属性（继承自jquery并用于定义ng-keypress指令{{3 }}）确实工作，支持html onkeypress，但ng-keypress似乎没有工作。有谁知道为什么ng键指令不起作用？

Answer 1

我认为这与Javascript和Angular表达式之间的区别有关，特别是在执行上下文方面。根据Angular的文档：

上下文：JavaScript表达式是针对全局进行评估的窗口。在Angular中，表达式是根据范围对象进行评估的。

此外，作者继续澄清

Angular表达式无法访问全局变量窗口，文档或位置。这种限制是故意的。它防止意外进入全球国家 - 一个共同的来源微妙的错误。

因此，不会根据Angular的执行上下文来评估ng-keypress指令内的alert（）。只需要在Angular的上下文中创建一个函数，并调用该函数在ng-keypress中进行评估，

查看

<canvas id="blank-canvas" tabindex="1" ng-keypress="alertFn()"></canvas>

<强>控制器

app.controller('CanvasCtrl', function($scope, $log) { $scope.alertFn = function() { alert("key pressed"); } });

一个有效的JS小提琴：http://jsfiddle.net/codeapprenti/tun4urc3/

在canvas元素上使用ng-keypress

1 个答案: