Phát hiện các sự kiện chuột + bàn phím trong Góc để ng-repeat

Question

Tôi có một ứng dụng mà tôi tạo ra một tập hợp các nhịp bằng cách sử dụng ng-repeat và mỗi khoảng có một id duy nhất (giả sử span-{{$index}}). Bây giờ tôi muốn thực hiện như sau:

• Nếu tôi nhấp vào một khoảng, tôi muốn id của khoảng được sao chép. Tôi quản lý để làm điều này thông qua ng-click.
• Tôi muốn mở rộng chức năng này hơn nữa để phát hiện nhiều nhấp chuột, để nhận được một số id được chọn, nhưng chỉ chỉ nếu phím CTRL được giữ trong khi nhấp chuột.

Đối với ví dụ. nếu tôi đã nhấn nút ctrl khi tôi chọn span với id 1,3,5,7, mảng của tôi nên có [1,3,5,7], nhưng nếu tôi không có phím CTRL nhấn thì tôi chỉ nên có [7], vì nó là khoảng cuối cùng được chọn.

Ngoài ra, tôi có thể ràng buộc các sự kiện tương đối không? Ví dụ. nếu tôi chọn span với id là 1, nếu tôi nhấp vào CTRL + DOWN_ARROW, id 2 cũng được chọn ... rồi id 3 và tiếp tục cho đến khi tôi tiếp tục nhấn DOWN_ARROW.

Tôi đoán gần nhất tôi đã nhìn thấy loại này của UX là với việc lựa chọn địa chỉ liên lạc trong Gmail trong khi soạn một thư mới. Tôi có thể chọn các liên hệ bằng tất cả các loại kết hợp bàn phím và chuột. Tôi đang tìm một cái gì đó rất giống

Tôi đang chơi đùa với các kỹ thuật UX khác nhau nhưng tôi bị mắc kẹt trên một cách chính xác làm thế nào tôi có thể làm điều này với góc.

Answer 1

Đối với câu hỏi đầu tiên bạn thấy plunkr dưới đây.

Nếu bạn vượt qua $ sự kiện thông qua chức năng ng nhấp chuột, bạn có thể truy cập vào sự kiện này trong điều khiển của bạn. Trong ví dụ của tôi, tôi đã kiểm tra xem altKey có đúng là kiểm tra xem phím alt đã được nhấn cùng lúc với lần nhấp hay chưa. Bạn cũng có thể truy cập ctrlKey, shiftKey và nhấn nút chuột. Xem MouseEvent đối tượng ở đây - http://www.w3schools.com/jsref/dom_obj_event.asp

Bộ điều khiển:

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]; 
    }; 
}) 

http://plnkr.co/edit/RAX5oxkTomXxryp0sNNc

Khi logic bắt đầu trở nên phức tạp hơn một chút thì có lẽ nó sẽ là tốt nhất để làm việc này trong một chỉ thị.

Đối với câu hỏi thứ hai những phần cơ bản có thể được nhìn thấy trong các ví dụ sau:

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; 
    } 
}) 

http://plnkr.co/edit/PyyjfRMovygeq9qNbzWo

Chúng tôi lắng nghe trên các tài liệu cho máy ép chìa khóa và kiểm tra lại cho altKey. Sau đó, nếu mã khóa là một trong các phím nóng của chúng tôi, chúng tôi sẽ gửi một thông báo tới $ rootScope bằng $ rootScope. $ Broadcast() mà trình điều khiển đang nghe bằng phương thức $ rootScope. $ On().

Trong ví dụ trên, Alt + s sẽ thêm nhiều id và alt + a sẽ xóa các id đó xuống id được chọn ban đầu.

Answer 2

Có lẽ chỉ thị Góc sẽ hữu ích.Dưới đây là ví dụ về cách bạn có thể nắm bắt thông tin khóa meta bằng cách sử dụng chỉ thị góc và nhận quyền truy cập vào thông tin bên trong Bộ điều khiển góc (Plnkr):

<!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>