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

        });
    }
};
}]);