I am using the angular-bootstrap's (ui.bootstrap) uib-carousel component with custom template to change the style, text, and functionality of the back and next buttons. I have to perform other actions when the "next" button is touched, in addition to the component's original functionality. Following the method of "capturing" the select event in this answer: How do you Bind to Angular-UI's Carousel Slide Events?, I modified the answer to use the next event.
the html declaration
<uib-carousel template-url="/tpl.html" active="vm.wizardStep" no-wrap="true" on-carousel-next="vm.onNext()" style="height: 395px;">
and the directive like so
.directive('onCarouselNext', function($parse) {
return {
require: '^uibCarousel',
link: function(scope, element, attrs, carouselCtrl) {
var callBack = $parse(attrs.onCarouselNext);
var origNext = carouselCtrl.next;
carouselCtrl.next = function() {
callBack(scope);
return origNext.apply(this, arguments);
};
}
};
});
The uib-carousel's next event does get fired, but it is not calling it through my directive. Just to compare apples to apples, I tried using the code in the answer as-is (i.e. capturing the "select" event), and that does work perfectly and calls my callback function. The reason I need to capture the "next" and can't use the "select" is because I'm using this to set up a "wizard" type framework, and the final "next" is a "done" that needs to do different code.
Anyone done something like this and get it to work?
