Question

我想点击页面上任意位置的转义键而不关注任何元素，如按钮或输入。为什么会失败：

  $(document).keyup(function(e) {
    if (e.keyCode === 27) {
      $location.path("/");
    }
  });

但这有效吗？

  $scope.cancelEdit = function() {
      $location.path('/');
  }

后者的HTML：

<button ng-click="cancelEdit()" type="button" class="btn btn-default">Cancel</button>

更新：

1。这些都不起作用：

$document.on('keyup', function(e) {.....

$document.bind('keyup', function(e) {....

2。以下是完整的HTML：

<div class="edit jumbotron">
  <i id="loader" class="glyphicon glyphicon-refresh"></i>
  <form name="editForm" class="form-horizontal" ng-submit="saveEdit()">
    <div class="panel panel-info">
      <div class="panel-heading">Edit Site Actions</div>
        <table class="edit_table table table-striped">
          <thead>
            <tr>
              <th class="action_name_cell">Action</th>
              <th class="float_cell">Warning Threshold</th>
              <th class="float_cell">Error Threshold</th>
              <th class="toggle_cell">Enabled</th>
            </tr>
          </thead>
          <tbody>
            <tr class="data_row" ng-repeat="row in get_edit_rows()">
              <td class="action_name_cell">{{row.action_name}}</td>
              <td class="float_cell">
                <div class="form-group">
                  <div class="col-sm-8">
                  <input type="number" class="form-control" ng-model="row.warning"
                         name="{{row.threshold_id}}_warning"
                         placeholder="10.0" ng-value="row.warning"
                         ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/"
                         step="0.1" required />
                  </div>
                </div>
              </td>
              <td class="float_cell">
                <div class="form-group">
                  <div class="col-sm-8">
                  <input type="number" class="form-control" ng-model="row.error"
                         name="{{row.threshold_id}}_error"
                         placeholder="10.0" ng-value="row.error"
                         ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/"
                         step="0.1" required />
                  </div>
                </div>
              </td>
              <td class="toggle_cell">
                <label></label>
                <toggle ng-model="row.enabled" name="{{row.threshold_id}}_enabled"
                        ng-true-value="'on'" ng-false-value="'off'"></toggle>
              </td>
            </tr>
          </tbody>
        </table>
    </div>
    <!-- END panel / panel-info -->

    <!-- Buttons -->
    <div class="base_button_wrapper">
      <button type="submit" class="btn btn-success">Save</button>
      <button ng-click="cancelEdit()" type="button" class="btn btn-default">Cancel</button>
    </div>
  </form>
</div>

Answer 1

而不是：

$(document).keyup(function(e) {
  if (e.keyCode === 27) {
    $location.path("/");
  }
});

使用$document服务：

$document.bind('keyup', function(e) {
  if (e.keyCode === 27) {
    $timeout(function () {
      $location.path("/");
    });
  }
});

<强> JSFIDDLE

注意：请勿忘记在$document.unbind('keyup')中使用$scope.$on('$destroy', ...);删除您的活动，以避免内存泄漏。

Answer 2

您可以像这样处理元素上的关键事件

add this directive to the element

ng-keyup="cancelEditEscape($event)"
$scope.cancelEditEscape = function(e) {

        if (e.keyCode === 27) {
          $location.path("/");
        }
};

例如：

<div ng-keyup="cancelEditEscape($event)">
     <!-- another html stuff -->
     <button ng-click="cancelEdit()" type="button" class="btn btn-default">Cancel</button>
</div>

这是一个example

的plnkr

<强>更新对于你的HTML，你可以放<div class="edit jumbotron" ng-keyup="cancelEditEscape($event)"> 或在<form ng-keyup="cancelEditEscape($event)">

Answer 3

最有可能的原因是你混合了jQuery和angular（并且jQuery事件不属于角度范围）。看来你还在使用angular 1.x所以我敢打赌ngKeyUp会起作用：documentation。

示例（未测试）：

Dim dt as DateTime
dt = TimeZoneInfo.ConvertTimeBySystemTimeZoneId(DateTime.UtcNow, "GMT Standard Time")

角度定位路径不随按键变化

3 个答案: