AngularJS使用箭头键浏览图像轮播

Question

我有一个内置在AngularJS中的图像轮播，可通过两个A标签（通过ng-click用作按钮）进行导航。 我想允许用户也使用箭头键向左导航和书写。 我发现了一些使用ng-keypress或ng-keyup / keydown的示例，但是它们都需要输入标签才能具有焦点。

我找到了解决此问题的解决方案，该解决方案在$ rootScope上设置了一个keyup事件，该事件监听关键事件。

app.directive('keypressEvents',

function ($document, $rootScope) {
    return {
        restrict: 'A',
        link: function () {
            console.log('linked');
            $document.bind('keyup', function (e) {
                $rootScope.$broadcast('keyup', e, e.keyCode);
            });
        }
    }
});

/////////ARROW KEY SHORTCUTS
$scope.key = 'none'

$rootScope.$on('keyup', function (evt, obj, key) {
    $scope.$apply(function () {
        $scope.key = key;
        //left
        if(key == 37) {
            ///need here to somehow be aware of the current slide index
        }
        //right
        if(key == 39) {

        }
    });
})

这行得通，但是我不知道如何将这些事件链接到图像轮播，该轮播知道图像的索引并执行显示下一个或上一个的逻辑。

//IMAGE CAROUSEL

//sets the current index to 0, the start
$scope.currentSlideIndex = 0;

//allows us to change the index by passing this function a new index
$scope.setCurrentSlideIndex = function (index) {
    $scope.currentSlideIndex = index;
};
//returns a boolean value as to whether the current index matches whatever we pass this function
$scope.isCurrentSlideIndex = function (index) {
    return $scope.currentSlideIndex === index;
};

$scope.prevSlide = function (text) {
  $scope.single = text;
  console.log("prevSlide Pressed: ", text.title)
    $scope.currentSlideIndex = ($scope.currentSlideIndex < $scope.results.length - 1) ? ++$scope.currentSlideIndex : 0;
};
$scope.nextSlide = function (text) {
  $scope.single = text;
  console.log("Next Pressed: ", text.title)
    $scope.currentSlideIndex = ($scope.currentSlideIndex > 0) ? --$scope.currentSlideIndex : $scope.results.length - 1;
};

html

<div id="Carousel" class = "col-sm-12 col-md-9" ng-show = "results.length < 8 || singleChosen">


<div ng-show="!singleChosen" class="slider">
  <div ng-show="!detail">

    <div ng-repeat="text in texts | filter: multiFilter as results "  ng-hide="!isCurrentSlideIndex($index)">

        <img  class = "nonDraggableImage slide " ng-src="{{text.large}}" alt="{{text.large}}">



        <div keypress-events></div>



        <a class="arrow prev" href="#/text" ng-click="nextSlide(results[($index+1)%results.length])"></a>
        <a class="arrow next" href="#/text" ng-click="prevSlide((results[(($index-1)<0?results.length-1:$index-1)]))"></a>


    </div>
  </div>

有没有办法只用ng-click在a标签内使用ng-keyup？

像这样的东西

<a class="arrow prev" href="#/text" ng-keyup="$event.keyCode === 37 
&& nextSlide(results[($index+1)%results.length])" 
ng-click="nextSlide(results[($index+1)%results.length])"></a>

Answer 1

用新指令解决：在指令中放置逻辑，在

app.directive('arrowNavigate',['$document',function($document){
    return{
        restrict:'A',
        link:function(scope){

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

                if(e.keyCode == 37){
                    console.log(scope.currentSlideIndex);
                    scope.currentSlideIndex = (scope.currentSlideIndex < scope.results.length - 1) ? ++scope.currentSlideIndex : 0;
                    scope.$apply();
                    e.preventDefault();
                }
                if(e.keyCode == 39){
                    console.log(scope.currentSlideIndex);
                    scope.currentSlideIndex = (scope.currentSlideIndex > 0) ? --scope.currentSlideIndex : scope.results.length - 1;
                    scope.$apply();
                    e.preventDefault();
                }

        });
    }
};
}]);