angular ui.bootstrap.carousel call next()/prev() f

Question

How do I access the next()/prev() methods of the carousel from the slide? I'm trying to connect to hm-swipe-left/right, but I don't seem to have the 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

I was looking for a solution to this. I'll post what I finally did:

In the controller where you have the carousel (make sure your html carousel has 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;
}

Then in your HTML page:

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

Hope it helps to anyone! It works for bootstrap 3.0.2 (my version)

EDIT: Edited the modulus (since there is a bug in javascript when calculating modulus: Javascript modulo not behaving) Now it works! :)

Answer 2

You can get the scope of directive from DOM element and re-use it

    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 3

In my case I was just able to do this

<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">

I am not sure if doing $parent.$parent is advised but it worked perfectly for me and I did not have put jquery/html code in my controller.

Keep in mind I was inside a ng-repeat, it could also be $parent.next() outside of the ng-repeat.

Answer 4

Here is a slightly simpler solution:

Javascript Controller

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

HTML View

<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>