fix(carousel): disable prev/next arrows if noWrap and at bounds

Author: plondon

Diff for: src/carousel/carousel.js

@@ -123,6 +123,14 @@ angular.module('ui.bootstrap.carousel', [])
     return $scope.active === slide.slide.index;
   };
 
+  $scope.isPrevDisabled = function() {
+    return $scope.active === 0 && $scope.noWrap();
+  };
+
+  $scope.isNextDisabled = function() {
+    return $scope.active === slides.length - 1 && $scope.noWrap();
+  };
+
   $scope.pause = function() {
     if (!$scope.noPause) {
       isPlaying = false;

Diff for: src/carousel/test/carousel.spec.js

@@ -163,18 +163,20 @@ describe('carousel', function() {
       expect(navPrev.length).toBe(0);
     });
 
-    it('should not show prev button when slide index is 0 and noWrap is truthy', function() {
+    it('should disable prev button when slide index is 0 and noWrap is truthy', function() {
       scope.$apply();
 
       var $scope = elm.isolateScope();
       $scope.noWrap = function() {return true;};
+
+      $scope.isPrevDisabled();
       scope.$apply();
 
       var navPrev = elm.find('a.left');
-      expect(navPrev.hasClass('ng-hide')).toBe(true);
+      expect(navPrev.hasClass('disabled')).toBe(true);
     });
 
-    it('should not show next button when last slide is active and noWrap is truthy', function() {
+    it('should disable next button when last slide is active and noWrap is truthy', function() {
       scope.slides = [
         {content: 'one', index: 0},
         {content: 'two', index: 1}
@@ -184,12 +186,13 @@ describe('carousel', function() {
 
       var $scope = elm.isolateScope();
       $scope.noWrap = function() {return true;};
-
       $scope.next();
+
+      $scope.isNextDisabled();
       scope.$apply();
 
       var navNext = elm.find('a.right');
-      expect(navNext.hasClass('ng-hide')).toBe(true);
+      expect(navNext.hasClass('disabled')).toBe(true);
     });
 
     it('should show navigation when there are 3 slides', function () {

Diff for: template/carousel/carousel.html

@@ -1,10 +1,10 @@
 <div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel" ng-swipe-right="prev()" ng-swipe-left="next()">
   <div class="carousel-inner" ng-transclude></div>
-  <a role="button" href class="left carousel-control" ng-click="prev()" ng-show="slides.length > 1" ng-hide="active === 0 && noWrap()">
+  <a role="button" href class="left carousel-control" ng-click="prev()" ng-class="{ disabled: isPrevDisabled() }" ng-show="slides.length > 1">
     <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
     <span class="sr-only">previous</span>
   </a>
-  <a role="button" href class="right carousel-control" ng-click="next()" ng-show="slides.length > 1" ng-hide="active === slides.length - 1 && noWrap()">
+  <a role="button" href class="right carousel-control" ng-click="next()" ng-class="{ disabled: isNextDisabled() }" ng-show="slides.length > 1">
     <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
     <span class="sr-only">next</span>
   </a>