角度 ng-focus / 焦点输入元素

Question

我有三个样式为按钮的输入元素。在 ng-keyup 上，我在控制器中调用了一个函数。

现在的问题是我必须手动单击其中一个才能获得焦点，然后 keyUp 才能工作。

我尝试了 ng-focus='focus' 然后在控制器中设置 $scope.focus=true ，它不起作用。

  <div class="row startButtonRow">
    <div class="col col-50" align="center">
      <button class="button button-dark startButton" ng-click="start()" ng-disabled="disableStart">Start</button>
    </div>

    <div class="col" align="center">
      <input ng-focus="focus" type="button" class="button button-dark startButton" ng-disabled="disableStop" ng-keyup="stopTimer($event)">
    </div>

    <div class="col" align="center">
      <input type="button" class="button button-dark startButton" ng-disabled="disableStop" ng-keyup="stopTimer($event)">
    </div>

    <div class="col" align="center">
      <input type="button" class="button button-dark startButton" ng-disabled="disableStop" ng-keyup="stopTimer($event)">
    </div>

  </div>

单击开始按钮后，符号开始出现在三列上，我应该在出现特定符号时按下相应的按钮（此处为带有键的输入元素）。我不想先点击元素，然后才能使用键盘键。

Answer 1

ng-keyup 不必继续您的输入元素之一，您可以将其移动到您的 body 元素，或者您的 ng-app 元素是什么，它仍然会捕获按键。

另一方面，我相信您误解了 ng-focus 的作用。它在输入聚焦时评估给定的表达式，而不是告诉您的浏览器聚焦该元素。您将需要构建一个自定义指令来集中输入，请参阅How to set focus on input field?

你可以在你的控制器中添加这样的东西：

var handler = function(e){
    if (e.keyCode === 37) {
      // left arrow
    } else if (e.keyCode === 38) {
      // up arrow
    } else if (e.keyCode === 39) {
      // right arrow
    }
};

var $doc = angular.element(document);

$doc.on('keyup', handler);
$scope.$on('$destroy',function(){
  $doc.off('keyup', handler);
})