Question

如何从幻灯片中访问轮播的下一个（）/ prev（）方法？我正在尝试连接到hm-swipe-left / right，但我似乎没有合适的$ scope

<carousel interval="1000">
  <slide ng-repeat="card in slides" active="card.active">
    <div class="card list-unstyled text-center">
      <ul class='header list-inline list-unstyled'
      hm-swipe-left="swipe('next')"
      hm-swipe-right="swipe('prev')">   
        <li><i class="icon {{card.icon}} fa-3x"></i></li>
        <li class="title">{{card.title}}</li>
      </ul>
    </div>
  </slide>
</carousel>

Answer 1

我一直在寻找解决方案。我将发布我最终做的事情：

在你有旋转木马的控制器中（确保你的html轮播有id="myCarousel"）：

$scope.showNext = function(){
    var index = ($('#myCarousel .active').index()+1)%(slides.length);
    var modIndex = (((index)%(slides.length))+(slides.length))%(slides.length);
    $scope.slides[modIndex].active=true;
}
$scope.showPrev = function(){
    var index = ($('#myCarousel .active').index()-1)%(slides.length);
    var modIndex = (((index)%(slides.length))+(slides.length))%(slides.length);
    $scope.slides[modIndex].active=true;
}

然后在您的HTML页面中：

<img ng-src="{{slide.image}}" style="margin:auto;" ng-swipe-right="showPrev()" ng-swipe-left="showNext()">

希望对任何人都有帮助！它适用于bootstrap 3.0.2（我的版本）

编辑：编辑模数（因为在计算模数时javascript中存在错误：Javascript modulo not behaving）现在它有效！：）

Answer 2

就我而言，我只能做到这一点

<div  ng-swipe-left="$parent.$parent.prev()" ng-swipe-right="$parent.$parent.next()"  uib-slide ng-repeat="product in vm.productList track by $index" index="$index">

我不确定是否做了$ parent。建议使用$ parent，但它对我来说很完美，我没有把jquery / html代码放在我的控制器中。

请记住，我在ng-repeat中，它也可能是ng-repeat之外的$ parent.next（）。

Answer 3

您可以从DOM元素获取指令范围并重新使用

    var element = angular.element('.carousel .left');

    if (element.length > 0 && element.scope && element.scope().prev) {
      element.scope().prev();
    }

   // or
    if (element.length > 0 && element.scope && element.scope().next) {
      element.scope().next();
    }

Answer 4

这是一个稍微简单的解决方案：

Javascript控制器

$scope.carouselNext = function() {
  $('#carousel-main').carousel('next');
}
$scope.carouselPrev = function() {
  $('#carousel-main').carousel('prev');
}

HTML视图

<div id="carousel-main" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-main" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-main" data-slide-to="1"></li>
    <!-- add indicators for any slides added -->
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">

    <div id="slide1" class="item active" ng-swipe-right="carouselPrev()" ng-swipe-left="carouselNext()">
      <!-- img or content here -->
    </div>

    <div id="slide2" class="item" ng-swipe-right="carouselPrev()" ng-swipe-left="carouselNext()">
      <!-- img or content here -->
    </div>

    <!-- add more slides as needed -->

  </div>
</div>

angular ui.bootstrap.carousel从$ scope调用next（）/ prev（）

4 个答案: