javascript - Angular.js 中 的按键控制位置

Question

这里是JSFiddle .

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

例如

on keypress of the letter "a" add +10% to {{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

在这里工作:检查您更新的 fiddle :http://jsfiddle.net/PJaB8/3/

使用angular.element，您可以使用 jquerylite 选择一个元素，使用bind，您可以将事件绑定(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: fiddle 包含完整的键码常量堆栈。检查 js 文件的底部。