Question

我正在使用带有自定义模板的angular-bootstrap＆＃39; s（ui.bootstrap）uib-carousel组件来更改后退和下一个按钮的样式，文本和功能。我必须在＆＃34; next＆＃34;除了组件的原始功能外，还会触摸按钮。遵循＆＃34;捕获＆＃34;的方法这个答案中的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的下一个事件确实被解雇了，但它没有通过我的指令调用它。只是为了比较苹果和苹果，我尝试按原样使用答案中的代码（即捕获＆＃34;选择＆＃34;事件），这确实可以正常工作并调用我的回调函数。我需要抓住＆＃34; next＆＃34;并且无法使用＆＃34; select＆＃34;是因为我用它来设置一个＆＃34;向导＆＃34;类型框架，最终＆＃34; next＆＃34;是一个＆＃34;完成＆＃34;需要做不同的代码。

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

Answer 1

因此，看到我试图“劫持”轮播控件以将其转换为向导控件，我最终只是采用轮播代码并完全更改以满足我的需求。如果有人想看代码，请告诉我，我会把它放在github上。

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

1 个答案: