angular-ui: Trigger events on Carousel

Question

I'm using angular-UI's Carousel and i want to trigger the "prev" and "next" events from my controller.
There was issue about it on Github, but its seems not to be handled actually: https://github.com/angular-ui/bootstrap/issues/1836

the Carousel page with the plunker example: http://angular-ui.github.io/bootstrap/

Any idea on the best approach ? Thank you!

There are two ways to do this stated in the issue you linked in your question. Can you provide some code and explain exactly where you are stuck? — jme11, May 18 '15 at 16:35
here is a plunker: http://plnkr.co/edit/nWSsGt9t9AftuiPKM4pa?p=preview my solution actually is to trigger a click using angular.element('.right').trigger('click'); but it's awful... — Mahmal Sami, May 19 '15 at 22:43
Okay, yeah, I probably wouldn't use that approach, but is your goal to just have some buttons outside the carousel that allow you to go to the next slide or the previous slide? Or do you want to go to a specific slide? Do you want to only trigger the behavior from the carousel's controller or do you want to do this from some other controller? I'm just trying to figure out how to give you the best suggestion. — jme11, May 20 '15 at 02:32
Sorry, my description wasn't clear enough. Basically, I want to add new prev, next buttons. — Mahmal Sami, May 20 '15 at 10:03

score 7 · Accepted Answer · edited Jun 20 '20 at 09:12

You can create a custom directive that exposes the next and previous methods of the carousel on your scope:

Plunker Demo

app.directive('carouselControls', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      scope.goNext = function() {
        element.isolateScope().next();
      };
      scope.goPrev = function() {
        element.isolateScope().prev();
      };
      
    }
  };
});

Add the directive to your carousel element and then you can call the goPrev or goNext methods on your controller scope.

<carousel carousel-controls ... ></carousel>
//Call goNext() or goPrev() such as:
<button class="btn btn-primary" ng-click="goNext()">Next Slide</button>

It's a pretty straightforward directive, but here's how it works:

The carousel has methods $scope.next and $scope.prev, but we can't access them directly from the controller because the carousel has an isolated scope. To expose them, in the carouselControls link function, we create two methods goNext and goPrev, which we add to the scope for the carouselControls.

Since carouselControls doesn't have an isolated scope, the scope passed to the link function is the scope of its parent controller. We use these methods to call the next or prev methods on the isolatedScope of the element (which is the carousel element because that's where we place our carouselControls directive).

this doesn't seem to work with the new way that ui-bootstrap works (instead of using , you now use — Shaggy13spe, Sep 01 '16 at 19:43

score 0 · Answer 2 · edited May 23 '17 at 12:08

jme11's answer doesn't seem to work with more recent versions of angular-ui. Instead I found I needed to make a directive like the following:

.directive('carouselControls', function() {
    return {
        require: '^uibCarousel',
        link: function(scope, element, attrs, carouselCtrl) {
          scope.goNext = function() {
            carouselCtrl.next();
          };
          scope.goPrev = function() {
            carouselCtrl.prev();
          };
        }
    };
})

(inspiration from this answer)

angular-ui: Trigger events on Carousel

2 Answers2

Plunker Demo