Javascript 检测鼠标+；键盘事件在角度为ng的重复

我有一个应用程序，其中我使用ng repeat生成了一组span，每个span都有一个唯一的id（比如

span-{{$index}

）。现在我要执行以下操作：

• 如果单击跨度，我希望复制跨度的id。我通过ng click成功地做到了这一点
• 我想进一步扩展此功能以检测多次单击，以获取所选ID的数组，但是如果在单击过程中按住CTRL键，则仅

例如，如果我在选择id为1,3,5,7的跨度时单击了ctrl键，那么我的数组应该有[1,3,5,7]，但是如果我没有按下ctrl键，那么我应该只有[7]，因为它是最后一个选择的跨度

另外，我可以绑定相对事件吗？例如，如果我选择id为1的范围，如果我单击CTRL+向下箭头，id 2也会被选择。。。然后id 3，依此类推，直到我一直按下箭头

我想我见过的最接近这种用户体验的方式是在Gmail中选择联系人，同时撰写新邮件。我可以使用各种键盘和鼠标组合选择联系人。我在找类似的东西

---

我正在尝试不同的用户体验技术，但我一直在思考如何使用angular实现这一点。

关于您的第一个问题，请参阅下面的plunkr

如果将$event传递给ng click函数，则可以访问控制器中的事件。在我的示例中，我检查altKey是否为true，即检查alt键是否在单击的同时按下。您还可以访问ctrlKey、Shift键和按下的鼠标按钮。请参见此处的MouseeEvent对象-

控制员：

angular.module('exampleApp', [])

.controller("ItemCtrl", function($scope){

    $scope.items = [
      {text: "Bob", id: 1},
      {text: "Alice", id: 2},
      {text: "Frank", id: 3},
      {text: "Lisa", id: 4}
    ];
    $scope.itemList = [];

    $scope.addItemIdToList = function(event, item){
        if(event.altKey){
          if(isItemInList(item)){
            removeItemIdFromList(item);
          } else {
            addItemIdToList(item);
          }
        } else {
          addItemIdAsSingleSelection(item);
        }
    };

    var isItemInList = function(item){
      var indexOfItem = $scope.itemList.indexOf(item.id);
      return indexOfItem > -1;
    }

    var removeItemIdFromList = function(item){
      var indexOfItem = $scope.itemList.indexOf(item.id);
      $scope.itemList.splice(indexOfItem, 1);
    };

    var addItemIdToList = function(item){
      $scope.itemList.push(item.id);
    };

    var addItemIdAsSingleSelection = function(item){
      $scope.itemList = [item.id];
    };
})

当逻辑开始变得更复杂时，最好在指令中执行此类操作

对于第二个问题，可以在以下示例中看到基本部分：

angular.module('exampleApp', [])

.directive('keypressEvents', function ($document, $rootScope) {
    return {
        restrict: 'E',
        link: function () {
            console.log('linked');
            $document.on('keypress', function(e) {
                if(e.altKey){
                    var s = 223;
                    var a = 229;
                    if(e.which == s){
                      $rootScope.$broadcast("add_next_id");
                    } else if(e.which == a){
                      $rootScope.$broadcast("remove_last_id");
                    }
                }
            })
        }
    }
})

.controller("ItemCtrl", function($scope, $rootScope){

      $scope.items = [
      {text: "Bob", id: 1},
      {text: "Alice", id: 2},
      {text: "Frank", id: 3},
      {text: "Lisa", id: 4}
    ];

    $scope.itemList = [1];

    $rootScope.$on('add_next_id', function (evt, obj, key) {
        $scope.$apply(function () {
            addNextId();
        });
    });

    $rootScope.$on('remove_last_id', function (evt, obj, key) {
        $scope.$apply(function () {
            removeLastId();
        });
    });

    var addNextId = function(){
        var lastId = $scope.itemList[$scope.itemList.length - 1];
        if(lastId < $scope.items.length){
          $scope.itemList.push(lastId+1); 
        }
    };

    var removeLastId = function(){
        if($scope.itemList.length > 1){
          $scope.itemList.pop();
        }
    };

     $scope.isItemInList = function(item){
      var indexOfItem = $scope.itemList.indexOf(item.id);
      return indexOfItem > -1;
    }
})

角度模块（'exampleApp'，[]） .directive（'keypressEvents'，函数（$document，$rootScope）{ 返回{ 限制：'E'， 链接：函数（）{ console.log（'linked'）； $document.on（'keypress'，函数（e）{ 如果（如altKey）{ var s=223； var a=229； if（e.which==s）{ $rootScope.$broadcast（“添加下一个id”）； }else if（e.which==a）{ $rootScope.$broadcast（“删除最后一个id”）； } } }) } } }) .controller（“ItemCtrl”，函数（$scope，$rootScope）{ $scope.items=[ {文本：“鲍勃”，id:1}， {文本：“爱丽丝”，id:2}， {文本：“Frank”，id:3}， {文本：“丽莎”，id:4} ]; $scope.itemList=[1]； $rootScope.$on（'add_next_id'，函数（evt、obj、key）{ $scope.$apply（函数（）{ addNextId（）； }); }); $rootScope.$on（'remove_last_id'，函数（evt、obj、key）{ $scope.$apply（函数（）{ removeLastId（）； }); }); var addNextId=函数（）{ var lastId=$scope.itemList[$scope.itemList.length-1]； if（lastId<$scope.items.length）{ $scope.itemList.push（lastId+1）； } }; var removeLastId=函数（）{ 如果（$scope.itemList.length>1）{ $scope.itemList.pop（）； } }; $scope.isItemInList=函数（项）{ var indexOfItem=$scope.itemList.indexOf（item.id）； 返回索引项>-1； } })

我们听文档中的按键，然后再次检查altKey。然后，如果keyCode是我们的热键之一，我们将使用$rootScope.$broadcast（）向$rootScope发送一条消息，控制器正在使用$rootScope.$on（）方法监听该消息

---

在上面的示例中，alt+s将添加更多ID，alt+a将删除这些ID，直到原始选定的ID。

也许角度指令会有所帮助。下面是一个示例，说明如何使用angular指令捕获元键信息，并访问angular控制器（）中的信息：

你好{{person}}
Ctrl:{{info.Ctrl}|

var-app=angular.module（'myapp'，[]）；
应用控制器（'main'，函数（$scope）{
$scope.info={ctrl:false}；
$scope.person=“我”；
});
应用程序指令（'键盘'，函数（$超时）{
返回{
范围：{
信息：'='
},
链接：功能（范围、元素、属性）{
console.dir（scope.info）；
$（文档）.on（'keydown'，函数（e）{
$timeout（函数（）{
scope.info.ctrl=e.ctrlKey；
});
});
$（文档）.on（'keyup'，函数（e）{
$timeout（函数（）{
scope.info.ctrl=e.ctrlKey；
});
});
}
}
});

<!DOCTYPE html>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>

  <body ng-app="myapp" ng-controller="main">
    <h1>Hello {{person}}</h1>
    <p>Ctrl: |{{info.ctrl}}|</p>
    <keyboard info="info"></keyboard>
    <script>
      var app = angular.module('myapp', []);
      app.controller('main', function($scope){
        $scope.info = { ctrl: false };
        $scope.person = "Me";

      });

      app.directive('keyboard', function($timeout){
        return {
          scope: {
            info: '='
          },
          link: function(scope, element, attr){
            console.dir(scope.info);
            $(document).on('keydown', function(e){
              $timeout(function(){
                scope.info.ctrl = e.ctrlKey;
              });
            });
            $(document).on('keyup', function(e){
              $timeout(function(){
                scope.info.ctrl = e.ctrlKey;
              });
            });
          }
        }
      });
    </script>
  </body>

</html>