Question

offtopic：抱歉我的英语不好。 ontopic：我正在尝试使用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>');
  })

styles.css的

.slider-wrapper {
    margin: 0 auto;
    overflow: hidden;
    max-width: 100%;
}

.slider-gallery {
    transform: translate3d(0,0,0);
    width: 20000em;
    position: relative;
    top: 0;
}

.slider-gallery_item {
    width: 200px;
    float: left;
    padding: 0 10px;
}

.slider-gallery_item img {
    display: block;
    max-width: 100%;
    height: auto !important;
}

.slider-gallery {
    margin-top: 10px;
}

.slider-gallery_prev {
    cursor: pointer;
    float: left;
}

.slider-gallery_next {
    cursor: pointer;
    float: right;
}

您可以在http://plnkr.co/edit/25xt9qUvLaaxgYJQRUzJ?p=preview

上看到它

正如你所看到的，有点反应但现在，我总共有11个图像，我怎么做才能使按钮接下来和上一个功能？这不是一个技术问题，更多的是要做到这一点的方法，

谢谢！

Answer 1

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

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

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

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

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

Answer 2

您还可以尝试使用响应迅速且易于使用的Owl Carousel。它适用于AngularJs，可以高度定制。

由于

响应式幻灯片，带有AngularJS中的控件

2 个答案: