Question

我正在使用一个指令来注册键盘输入以允许其中一个视图中的键盘快捷键（热键）。这很好用，但是当移动到另一个视图（另一个模板）时，该指令仍处于活动状态，并且热键也在那里工作。如何将热键功能限制为仅使用标记的视图。不用说：我是新手，所以请耐心等待： - ）

我的app.js：

app.directive('shortcut', function() {
      return {
        restrict: 'E',
        replace: true,
        scope: true,
        link:    function postLink(scope, iElement, iAttrs){
            jQuery(document).on('keypress', function(e){
              scope.$apply(scope.keyPressed(e));
           });
        }
     };
});

在index.html的顶部：

     <ul class="nav nav-pills" data-ng-controller="NavbarController">
                <li data-ng-class="{'active':getClass('/customers')}"><a href="#/customers">Customers/a></li>
                <li data-ng-class="{'active':getClass('/orders')}"><a href="#/orders">Orders</a></li>
     </ul>

在模板orders.html中：

<shortcut></shortcut>

在模板使用的控制器中，有一个功能根据按下的键采取动作：

$scope.keyPressed = function(e, scope) {
    //.
    //.
    //.
    switch(e.which) {
     //Key h is pushed
     case 104:
     case 72:
         $scope.openDialog("h"); 
         break;
    //Key i is pushed
     case 105:
     case 73:
         $scope.openDialog("i"); 
         break;
        //key t is pushed
     case 116:
     case 84:
         $scope.openDialog("t"); 
         break;
            //Enter is pushed
     case 13:
         $scope.insertOrder();
         break;
     default:
         console.log("Another key");
     }
}

我尝试做的事情是，在直接的范围内，检测哪个视图是活动的，并且只对正确的视图起作用，但我不知道这是否可行或可行。处理这个问题的正确或首选方法是什么？

Answer 1

一旦元素的范围（应用了该指令）被销毁，您需要取消绑定事件监听器。所以，你可以这样做：

var keypressHandler = function(e){
    scope.$apply(scope.keyPressed(e));
});

jQuery(document).on('keypress', keypressHandler);
iElement.on('$destroy', function() {
    jQuery(document).off('keypress', keypressHandler);
});

您可以阅读有关$ destroy HERE。

的信息

Angularjs：如何使指令仅激活一个模板

1 个答案: