UI Bootstrap 控件 uib-carousel 绑定到下一个事件

Question

我正在使用带有自定义模板的 angular-bootstrap (ui.bootstrap) uib-carousel 组件来更改后退和下一个按钮的样式、文本和功能。除了组件的原始功能之外，当触摸“下一步”按钮时，我还必须执行其他操作。按照这个答案中“捕获”选择事件的方法：How do you Bind to Angular-UI's Carousel Slide Events?，我修改了答案以使用下一个事件。

html 声明

<uib-carousel template-url="/tpl.html" active="vm.wizardStep" no-wrap="true" on-carousel-next="vm.onNext()" style="height: 395px;">

和这样的指令

.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);
      };
    }
  };
});

uib-carousel 的下一个事件确实被触发，但它没有通过我的指令调用它。只是为了比较苹果和苹果，我尝试按原样使用答案中的代码（即捕获“选择”事件），这确实工作得很好并调用了我的回调函数。我需要捕获“next”而不能使用“select”的原因是因为我正在使用它来设置一个“wizard”类型的框架，而最终的“next”是一个“done”，需要做不同的代码。

有人做过这样的事情并让它工作吗？

Answer 1

因此，鉴于我是如何尝试“劫持”轮播控件以将其转变为向导控件的，我最终只是采用了轮播代码并对其进行了完全更改以满足我的需要。如果有人想看代码，请告诉我，我会在 github 上发布。