Question

如何全局监听按键并更改特定按键的值？

E.g。

在字母“a”的按键上添加+ 10％ {{player.controls[0].xPos}}

JS：

'use strict';

angular.module('dippybirdApp', []);
var app = angular.module('dippybirdApp')
    .controller('MainCtrl', function ($scope, Player) {
      $scope.player = Player;
    });

app.factory('Player', function() {
  var Player = {};
  Player.controls = [
    {
      xPos: '0%',
      yPos: '33%'
    },
    {
      xPos: '0%',
      yPos: '33%'
    }
  ];

  return Player;
});

HTML：

<div ng-app="dippybirdApp" ng-controller="MainCtrl">
  <section id="game">
    <div class="player" ng-style="{ left: player.controls[0].xPos, top: player.controls[0].yPos }"></div>
    <div class="player" ng-style="{ right: player.controls[1].xPos, top: player.controls[1].yPos }"></div>
  </section>
</div>

Answer 1

在此工作：检查您的更新小提琴：http://jsfiddle.net/PJaB8/3/

使用angular.element，您可以使用jquerylite选择元素，使用bind可以将事件绑定到所选元素。

现在只需传递一个侦听器功能并添加玩家位置

angular.element(document).bind("keypress",function(e){
    if(e.keycode == KEY.A){ //choose the key
      $scope.player.controls[0].xPos = "40%";
      $scope.$apply();
    }
});

请勿忘记$apply范围，以更新ng-style。

PS ：小提琴包含一个完整的常量密钥到密钥代码。检查js文件的底部。

Answer 2

使用Angular-UI keypress，绑定密钥a的密钥代码，并调用回调函数来设置所需播放器的位置。

Answer 3

基本上，在你的控制器中你可以写：

document.addEventListener('keydown', function(e){
   if (e.keycode === 65) {
     var xpos = parseInt($scope.player.controls[0].xPos.split('%')[0]) + 10 + '%';
     $scope.player.controls[0].xPos = xpos;
     $scope.$apply();
   }
}.bind(this))

关于Angular.js </div>中<div>的按键控制位置

3 个答案: