I have an image carousel built in AngularJS that navigates via two A tags used as buttons with ng-click. I would like to allow the user to also use the arrow keys to navigate left and write. I have found a few examples using ng-keypress, or ng-keyup/keydown, but they all require an input tag to have focus.
I found a solution to get around this, which sets up a keyup event on the $rootScope, which listens for key events.
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) {
}
});
})
This works, but I cannot figure out how to link these events to the image carousel which knows about the index of the image and performs the logic of showing the next or previous.
//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>
Is there not a way to just use ng-keyup within the a tags with the ng-click?
something like this
<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>
solved with a new directive: placed logic in the directive, linking scope in
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();
}
});
}
};
}]);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.