0

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

我的 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");
     }
}

我尝试做的事情是，在指令中，检测哪个视图是活动的，并且只对正确的视图采取行动，但我不知道这是否可行或可取。处理此问题的正确或首选方法是什么？

4

1 回答 1

0

一旦元素的范围（应用指令）被破坏，您需要取消绑定事件侦听器。因此，您可以执行以下操作：

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

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

您可以在此处阅读有关 $destroy的信息。

于 2013-07-10T08:50:52.857 回答