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

Question

我正在使用 angular-bootstrap 的 (ui.bootstrap) uib-carousel 组件和自定义模板来更改后面和后面的样式、文本和功能纽扣。除了组件的原始功能外，我还必须在触摸 "next" 按钮时执行其他操作。按照此答案中 "capturing" select 事件的方法：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 的下一个事件确实被触发，但它不是通过我的指令调用它。只是为了将苹果与苹果进行比较，我尝试按原样使用答案中的代码（即捕获 "select" 事件），并且它确实运行良好并调用了我的回调函数。我需要捕获 "next" 而不能使用 "select" 的原因是因为我正在使用它来设置一个 "wizard" 类型的框架，而最终的 "next"是一个 "done" 需要做不同的代码。

有人做过这样的事情并让它发挥作用吗？

Answer 1

所以看看我是如何尝试 "hijack" 旋转木马控件将其变成向导控件的，我最终只采用了旋转木马代码并完全更改它以满足我的需要。如果有人想查看代码，请告诉我，我会在 github.

上发布

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

UI Bootstrap control uib-carousel bind to next event

carousel

angularjs

angular-ui-bootstrap