角度 ui.bootstrap.carousel 从 $scope 调用 next()/prev()

Question

如何从幻灯片访问轮播的 next()/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()">

希望它对任何人都有帮助！ 它适用于引导程序 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>