Javascript 使用AngularJS控件进行响应式幻灯片放映

题外话：对不起，我的英语不好。 ontopic：我正在尝试用AngularJS中的控件进行响应式幻灯片放映（我也是AngularJS中的新手），我被困在控件的一部分幻灯片中，我得到了以下信息：

app.js

angular.module('slider', [])
  .controller('sliderCtrl', ['$scope', function($scope) {
    var thumbs = $scope.thumbs = [];
    for(i=1;i<=11;i++) {
      thumbs.push({
        image: 'http://lorempixel.com/500/300/sports/' + i
      })
    }
  }])
  .service('thumbService', function() {
    this.resize = function(elem, scope) {
      elem.style.width = scope.containerWidth + 'px';
    }
  })
  .directive('carousel', ['$timeout', '$window', function($timeout, $window) {
    return {
      restrict: 'EA',
      replace: true,
      transclude: true,
      controller: 'sliderCtrl',
      templateUrl: 'carousel.html',
      link: function(scope, elem) {
        angular.element($window).on('load resize', function() {
          $timeout(function() {
            scope.containerWidth = elem[0].offsetWidth * 0.25;
          }, 200);
        });
      }
    }
  }])
  .directive('thumbs', ['$window', 'thumbService', function($window, thumbService) {
    return {
      restrict: 'EA',
      replace: true,
      templateUrl: 'thumbs.html',
      require: '^carousel',
      transclude: true,
      link: function(scope, elem) {
        thumbService.resize(elem[0], scope);
        scope.$watch('containerWidth', function() {
          thumbService.resize(elem[0], scope);
        });
      }
    };
  }])
  .directive('controls', [function() {
    return {
      restrict: 'E',
      replace: true,
      require: '^carousel',
      templateUrl: 'controls.html',
      link: function(scope, elem, attrs) {
        scope.goPrev = function() {
          // TODO
        }
        scope.goNext = function() {
          // TODO
        }
      }
    }
  }])
  .run(function($templateCache) {
    $templateCache.put('thumbs.html', '<div class="slider-gallery_item" ng-transclude></div>');
    $templateCache.put('carousel.html',
      '<div id="slider" class="slider-wrapper">' +
      ' <div class="slider-gallery" ng-transclude></div>' +
      ' <controls></controls>' +
      '</div>');
    $templateCache.put('controls.html',
      ' <div id="slider-controls"> ' +
      '   <div class="slider-gallery_prev" ng-click="goPrev()"><</div>' +
      '   <div class="slider-gallery_next" ng-click="goNext()">></div>' +
      ' </div>');
  })

你可以在电视上看到

正如你所看到的，它有点响应，但现在，我总共有11张图片，我如何才能使按钮“下一个”和“上一个”正常工作？这不是一个技术性的问题，更像是一种方法

---

谢谢

在控制器上，您可以声明两种方法，例如：

this.goNext = function(){
  $scope.thumbs.push($scope.thumbs.shift());
}

this.goPrev = function(){
  $scope.thumbs.unshift($scope.thumbs.pop());
}

然后可以从指令的link属性调用这些方法（不要忘记添加第四个参数

ctrl

）：

---

您还可以尝试使用响应迅速且易于使用的。它与AngularJs配合良好，可以高度定制

---

谢谢

我不想使用jquery，需要一个完整的角度，但猫头鹰旋转木马做我想做的，我会看到代码！非常感谢。我会试试看，不过看起来不错

this.goNext = function(){
  $scope.thumbs.push($scope.thumbs.shift());
}

this.goPrev = function(){
  $scope.thumbs.unshift($scope.thumbs.pop());
}

directive('controls', [function() {
    return {
      restrict: 'E',
      replace: true,
      require: '^carousel',
      templateUrl: 'controls.html',
      link: function(scope, elem, attrs, ctrl) {
        scope.goPrev = function() {
          ctrl.goPrev();
        }
        scope.goNext = function() {
          ctrl.goNext();
        }
      }
    }
  }])