AngularJS navigate Image矢印キー付きカルーセル

Question

ng-clickでボタンとして使用される2つのAタグを介してナビゲートする画像カルーセルがAngularJSに組み込まれています。私は、矢印キーを使って左に移動して書き込むこともできます。 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クリックで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(); 
       } 

     }); 
    } 
}; 
}]); 

にスコープを結ぶ、ディレクティブでロジックを配置しました